巅云智能建站平台搭建版(创业流派版)火爆上线,毕生受权!新增:文章智能收罗+全站真静态打包+都会分站+智能小法式+不法词过滤+H5自顺应+智能链词等功效功效概况
赞助文档Help

操纵php做办事器和web前真个界面停止交互

一佰互联网站建造(www.taishanly.com) 宣布日期 2020-04-26 09:03:49 阅读数: 136

PHP与Web页面交互是完成PHP网站与用户交互的主要手腕。但愿检查本篇文章的学者起首检查一下PHP的根本常识,由于明天用到这个工具,现学现卖吧.后续会更新php办事器的根本常识!

1.起首你要有一个界面   我这里操纵我名目开辟的一个简略界面截取上去停止讲授!名目秘密  请勿**,你晓得!

html代码和界面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  <title>百姓商城</title> 
  <link href="http://www.baixingstatic.com/css/newindex4.css?v=20141022.css" rel="stylesheet" type="text/css" 
     media="screen"> 
</head> 
<body> 
<script type="text/javascript" src="jquery-3.0.0.min.js"></script> 
<div class="newindex_box mar_t_10 clearfix"> 
  <div class="index_hot_sale"> 
    <ul class="hot_sale_ul" id="hot_sale"> 
      <li class="hot_sale_li left" style="margin-right:0px;"> 
        <div class="pic"><a style="width:260px;height:172px;" 
                  href="http://www.baixingmall.com/item/565521bf0305c044a508ade00f539be3e0a3.htm" 
                  title=" "><img style="width:260px;height:172px;" alt="维多利陶瓷 天然石系列" 
                          src="http://image01.baixingstatic.com/system/56945f870cfe00463b0acfe04c9d9be3e0a3.jpg"></a> 
        </div> 
        <p class="tit"><a href="http://www.baixingmall.com/item/565521bf0305c044a508ade00f539be3e0a3.htm" 
                 title=""></a></p> 
 
        <div class="price"><span class="right">预订:<b class="yd_num">44</b>件</span><span 
            class="bx_price">¥62.1</span><span class="store_price">¥128</span></div> 
      </li> 
     </ul> 
  </div> 
</div> 

 </pre><pre name="code" class="html">上面的代码li局部实在是有八个 完成的是如许的界面

由于li代码都是一样的 以是就不逐一罗列了 大师大白就好了

ok 这里的都大白;上面便是用ajax停止交互 便是js的代码

在上面停止插手一个js的代码块

<pre name="code" class="javascript"><script type="text/javascript"> 
  var str=""; 
  $.ajax({ 
    type:"post", 
    url:"postDemo.php", 
    data:{ 
      "code":"201", 
      "user":"admin" 
    }, 
    success:function(data){ 
      var result=eval("("+data+")"); 
      alert(data); 
      for(var i=0;i<result.length;i++){ 
        if ((i+1)%4){ 
          var str = "<li class="hot_sale_li left" >" + 
              "<div class="pic"><a style="width:260px;height:172px;" href="" + result[i].titleURL + "" title="维多利陶瓷 天然石系列"><img style="width:260px;height:172px;" alt="" + result[i].title + "" src="" + result[i].imgURL + "" /></a></div>" + 
              "<p class="tit"><a href="" + result[i].titleURL + "" title="" + result[i].title + "">" + result[i].title + "</a></p>" + 
              "<div class="price"><span class="right">预订:<b class="yd_num">" + result[i].number + "</b>件</span><span class="bx_price">¥" + result[i].Nprice + "</span><span class="store_price">¥" + result[i].Oprice + "</span></div> </li>" 
 
        } 
        else { 
// 
          var str = "<li class="hot_sale_li left"style="margin-right: 0px" >" + 
              "<div class="pic"><a style="width:260px;height:172px;" href="" + result[i].titleURL + "" title="维多利陶瓷 天然石系列"><img style="width:260px;height:172px;" alt="" + result[i].title + "" src="" + result[i].imgURL + "" /></a></div>" + 
              "<p class="tit"><a href="" + result[i].titleURL + "" title="" + result[i].title + "">" + result[i].title + "</a></p>" + 
              "<div class="price"><span class="right">预订:<b class="yd_num">" + result[i].number + "</b>件</span><span class="bx_price">¥" + result[i].Nprice + "</span><span class="store_price">¥" + result[i].Oprice + "</span></div> </li>" 
 
        } 
        $(" .index_hot_sale #hot_sale").append(str); 
//       var oneTitle = result[i].title; 
//        $(".hot_sale_ul li:eq("+i+") a").attr("title",result[i].title); 
//        $(".hot_sale_ul li:eq("+i+") a").attr("title",result[i].title); 
 
      } 
    } 
  }) 
</script> 
<p></pre><p>上面的ajax的几个属性大师映带都懂 我简略说一下 type便是提交的体例 一共有post和get两种 我用的是post</p><p>url便是办事器php的途径便是提交数据到的地点,data便是咱们提交的数据,便是停止向办事器停止提交,而后办事器代码便因此下代码:</p><p></p><p><pre name="code" class="php"><?php</p>/** 
 * Created by PhpStorm. 
 * User: Administrator 
 * Date: 2016-7-15 
 * Time: 17:28 
 */ 
include "data.php"; 
if($_POST["code"]==201 && $_POST["user"]=="admin"){ 
//  echo json_encode(array("code"=>111)) ; 
  echo json_encode($hotSale); 
}else{ 
  echo json_encode(array("code"=>402)); 
  echo json_encode($hotSale); 
} 

办事器的代码 include出去的php文件便是存储数据的一个php文件上面会附上代码;我诠释一下这个简略的办事器真个代码

if($_POST["code"]==201 && $_POST["user"]=="admin"){ 
//  echo json_encode(array("code"=>111)) ; 
  echo json_encode($hotSale); 
} 

这个判定便是对客户端何处发过去的数据停止的判定  若是code和user都准确  则给你前往数据  若是不等几前往

else{ 
  echo json_encode(array("code"=>402)); 
  echo json_encode($hotSale); 
} 

这是在开辟中和办事器真个共事筹议定上去的

上面我说一下准确的时辰前往来的数据

<pre name="code" class="php">echo json_encode($hotSale);

便是这句 echo大师都晓得是php外面的关头字 ,json_encode便是获得咱们加载 data.php
便是这个

<pre name="code" class="php"><?php 
/** 
 * Created by PhpStorm. 
 * User: Administrator 
 * Date: 2016-7-14 
 * Time: 19:53 
 */ 
header("Content-type:text/html;charset=utf-8"); 
$hotSaleContent1 = array( 
  "imgURL" => "./百姓商城-百姓广场网上商城-郑州建材_郑州家具_郑州建材网_郑州装修公司-价钱最低,保证品质_files/56945f40088bc0491409db204dab9be3e0a3.jpg", 
  "title"=>"南边家居 Q23025床(带床垫)", 
  "titleURL"=>"http://www.baixingmall.com/item/52a297380d2c004b75090030180f9be3e0a3.htm", 
  "Nprice" => "1980", 
  "Oprice"=>"1980", 
  "number"=>"53" 
); 
$hotSaleContent2=array( 
  "imgURL"=>"./百姓商城-百姓广场网上商城-郑州建材_郑州家具_郑州建材网_郑州装修公司-价钱最低,保证品质_files/56945f4d0b610045fe09f8604dab9be3e0a3.jpg", 
  "title"=>"富气概气派 M-66型沙发", 
  "titleURL"=>"http://www.baixingmall.com/item/5178d9660f230049d10847f06de39be3e0a3.htm", 
  "Nprice"=>"3600", 
  "Oprice"=>"8600", 
  "number"=>"60" 
); 
$hotSaleContent3=array( 
  "imgURL"=>"./百姓商城-百姓广场网上商城-郑州建材_郑州家具_郑州建材网_郑州装修公司-价钱最低,保证品质_files/56945f570129804eec0921e04dab9be3e0a3.jpg", 
  "title"=>"和木轩 HK8005电视柜", 
  "titleURL"=>"http://www.baixingmall.com/item/526a0f8704a540492c0a3960345b9be3e0a3.htm", 
  "Nprice"=>"3600", 
  "Oprice"=>"8600", 
  "number"=>"60" 
); 
$hotSaleContent4=array( 
  "imgURL"=>"./百姓商城-百姓广场网上商城-郑州建材_郑州家具_郑州建材网_郑州装修公司-价钱最低,保证品质_files/56945f5f0cb640412e0aeb104d589be3e0a3.jpg", 
  "title"=>"怡品源12F07-12E07餐桌椅", 
  "titleURL"=>"http://www.baixingmall.com/item/52fec2ee0d0a4041ca08954018d89be3e0a3.htm", 
  "Nprice"=>"300", 
  "Oprice"=>"800", 
  "number"=>"600" 
); 
$hotSaleContent5=array( 
  "imgURL"=>"./百姓商城-百姓广场网上商城-郑州建材_郑州家具_郑州建材网_郑州装修公司-价钱最低,保证品质_files/56945f5f0cb640412e0aeb104d589be3e0a3.jpg", 
  "title"=>"怡品源12F07-12E07餐桌椅", 
  "titleURL"=>"http://www.baixingmall.com/item/52fec2ee0d0a4041ca08954018d89be3e0a3.htm", 
  "Nprice"=>"300", 
  "Oprice"=>"800", 
  "number"=>"600" 
); 
$hotSaleContent6=array( 
  "imgURL"=>"./百姓商城-百姓广场网上商城-郑州建材_郑州家具_郑州建材网_郑州装修公司-价钱最低,保证品质_files/56945f5f0cb640412e0aeb104d589be3e0a3.jpg", 
  "title"=>"怡品源12F07-12E07餐桌椅", 
  "titleURL"=>"http://www.baixingmall.com/item/52fec2ee0d0a4041ca08954018d89be3e0a3.htm", 
  "Nprice"=>"300", 
  "Oprice"=>"800", 
  "number"=>"600" 
); 
$hotSaleContent7=array( 
  "imgURL"=>"./百姓商城-百姓广场网上商城-郑州建材_郑州家具_郑州建材网_郑州装修公司-价钱最低,保证品质_files/56945f570129804eec0921e04dab9be3e0a3.jpg", 
  "title"=>"和木轩 HK8005电视柜", 
  "titleURL"=>"http://www.baixingmall.com/item/526a0f8704a540492c0a3960345b9be3e0a3.htm", 
  "Nprice"=>"3600", 
  "Oprice"=>"8600", 
  "number"=>"60" 
); 
$hotSaleContent8=array( 
  "imgURL"=>"./百姓商城-百姓广场网上商城-郑州建材_郑州家具_郑州建材网_郑州装修公司-价钱最低,保证品质_files/56945f4d0b610045fe09f8604dab9be3e0a3.jpg", 
  "title"=>"富气概气派 M-66型沙发", 
  "titleURL"=>"http://www.baixingmall.com/item/5178d9660f230049d10847f06de39be3e0a3.htm", 
  "Nprice"=>"3600", 
  "Oprice"=>"8600", 
  "number"=>"60" 
); 
$hotSale=array($hotSaleContent1, 
  $hotSaleContent2,$hotSaleContent3, 
  $hotSaleContent4,$hotSaleContent5, 
  $hotSaleContent6,$hotSaleContent7, 
  $hotSaleContent8); 
<p>这外面便是一切的办事器供给的数据 而后停止获得阿谁数组</p><p><span style="font-family: Arial, Helvetica, sans-serif;">$hotSale;</p><p>而后传到咱们html的ajax的data外面即便这个:</span></p> 
<span style="font-family: Arial, Helvetica, sans-serif;"></span><pre name="code" class="html">success:function(data){ 
      var result=eval("("+data+")"); 
      alert(data); 

这个便是ajax获得胜利的时辰履行的函数funcation()外面的data就获获得了咱们阿谁数组,实在他是json文件,只是像数组格局咱们还要停止转换
<span style="font-family: Arial, Helvetica, sans-serif;"></span><pre name="code" class="html">var result=eval("("+data+")");这句话便是把他转换成真正咱们熟习的array数组;

而后便是咱们要八条数据停止遍历

<pre name="code" class="html">for(var i=0;i<result.length;i++){      
          var str = "<li class="hot_sale_li left" >" + 
              "<div class="pic"><a style="width:260px;height:172px;" href="" + result[i].titleURL + "" title="维多利陶瓷 天然石系列"><img style="width:260px;height:172px;" alt="" + result[i].title + "" src="" + result[i].imgURL + "" /></a></div>" + 
              "<p class="tit"><a href="" + result[i].titleURL + "" title="" + result[i].title + "">" + result[i].title + "</a></p>" + 
              "<div class="price"><span class="right">预订:<b class="yd_num">" + result[i].number + "</b>件</span><span class="bx_price">¥" + result[i].Nprice + "</span><span class="store_price">¥" + result[i].Oprice + "</span></div> </li>" 
 
        } 

result.length便是咱们的最大长度了,

最初遍历以后就会输入八条了;不过必定有人问 你如何把办事器传过去的数组加载到html中的;上面对上面的阿谁var str外面的内容讲授一下:

<pre name="code" class="html" style="font-family: Arial, Helvetica, sans-serif;">var str = "<li class="hot_sale_li left" >" + 
              "<div class="pic"><a style="width:260px;height:172px;" href="" + result[i].titleURL + "" title="维多利陶瓷 天然石系列"><img style="width:260px;height:172px;" alt="" + result[i].title + "" src="" + result[i].imgURL + "" /></a></div>" + 
              "<p class="tit"><a href="" + result[i].titleURL + "" title="" + result[i].title + "">" + result[i].title + "</a></p>" + 
              "<div class="price"><span class="right">预订:<b class="yd_num">" + result[i].number + "</b>件</span><span class="bx_price">¥" + result[i].Nprice + "</span><span class="store_price">¥" + result[i].Oprice + "</span></div> </li>" 
 
        } 

大师能够看到这是一个自界说的数组而后把每行都加一个"++"连起来 大师都大白,这是js中的链接体例;外面的数据替代是用的是
result[i].XXX; i便是停止遍历的数据 每个差别的i从办事器json外面获得差别的数据 由于转换成数组了 就能够用来获得了;
XXX便是指的是每个数组键,来获得外面的值 放到属性外面,就把这个html写活了!!!

加载完显现便是和上一个界面一样的!!以上便是本文的全数内容,但愿对大师的进修有所赞助,也但愿大师多多撑持网页设想。

一佰互联是天下着名建站品牌办事商,咱们有九年、网站建造、网页设想、php开辟和域名注册及假造主机办事经历,供给的办事更是天下着名。最近几年来还整合团队上风自立开辟了可视化多用户”“3.0平台版,拖拽排版网站建造设想,轻松完成pc站、手机微网站、小法式、APP一体化全网营销网站扶植 ,已胜利的为天下上百家收集公司供给自助建站平台搭建办事。

相干消息more

29
04月
php使阅读器间接下载pdf文件的体例

有的阅读器装置了pdf翻开法式接洽关系到阅读器,以是间接写上pdf途径时是翻开pdf而不是下载,上面我就说下若是让他们只是下载,而不是阅读。成立... >>概况

01
05月
php5中date()得出的时候为甚么不是当

相干设置是点窜php.ini中的date.timezone参数: [Date] ;Definesthedefaulttimezoneused... >>概况

30
04月
php数组函数序列 之shuffle()和a

shuffle()界说和用法 shuffle() 函数把数组中的元素按随机挨次从头摆列。 若胜利,则前往 TRUE,不然前往 FALSE。 ... >>概况

24
03月
5个企业呼应式网站模板保举

分享 对企业来讲,找到一个合适本身企业品牌调性,又都雅的网站模... >>概况

高端网站扶植

美工统筹SEO,为企业电子商务营销助力!

德律风:

023-85725751
建站

产物

域名注册 假造主机 云办事器 企业邮局
智能建站 APP打包 微站/小法式 创业平台
网站推行 媒体营销 智能收罗 AI机械人
400德律风 短信营销 店销机械人
私家定制 流派网站