利用php做服务器和web前端的界面进行交互

发布时间：2016-11-27 09:22:43 所属栏目：大数据来源：网络整理

导读：PHP与Web页面交互是实现PHP网站与用户交互的重要手段。希望查看本篇文章的学者首先查看一下PHP的基础知识,因为今天用到这个东西,现学现卖吧.后续会更新php服务器的基础知识! 1.首先你要有一个界面nbsp;nbsp; 我这里利用我项目开发的一个简单界面截取下来进

PHP与Web页面交互是实现PHP网站与用户交互的重要手段。希望查看本篇文章的学者首先查看一下PHP的基础知识,因为今天用到这个东西,现学现卖吧.后续会更新php服务器的基础知识!

1.首先你要有一个界面nbsp;nbsp; 我这里利用我项目开发的一个简单界面截取下来进行讲解!项目机密nbsp; 请勿**,你懂得!

html代码和界面

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

nbsp;lt;/pregt;lt;pre name="code" class="html"gt;上面的代码li部分其实是有八个实现的是这样的界面

利用php做服务器和web前端的界面进行交互

因为li代码都是一样的所以就不一一列举了大家明白就行了

ok 这里的都明白;下面就是用ajax进行交互就是js的代码

在下面进行加入一个js的代码块

lt;pre name="code" class="javascript"gt;lt;script type="text/javascript"gt; 
  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;ilt;result.length;i++){ 
        if ((i+1)%4){ 
          var str = "lt;li class='hot_sale_li left' gt;" + 
              "lt;div class='pic'gt;lt;a style='width:260px;height:172px;' href='" + result[i].titleURL + "' title='维多利陶瓷 自然石系列'gt;lt;img style='width:260px;height:172px;' alt='" + result[i].title + "' src='" + result[i].imgURL + "' /gt;lt;/agt;lt;/divgt;" + 
              "lt;p class='tit'gt;lt;a href='" + result[i].titleURL + "' title='" + result[i].title + "'gt;" + result[i].title + "lt;/agt;lt;/pgt;" + 
              "lt;div class='price'gt;lt;span class='right'gt;预订：lt;b class='yd_num'gt;" + result[i].number + "lt;/bgt;件lt;/spangt;lt;span class='bx_price'gt;￥" + result[i].Nprice + "lt;/spangt;lt;span class='store_price'gt;￥" + result[i].Oprice + "lt;/spangt;lt;/divgt; lt;/ligt;" 
 
        } 
        else { 
// 
          var str = "lt;li class='hot_sale_li left'style='margin-right: 0px' gt;" + 
              "lt;div class='pic'gt;lt;a style='width:260px;height:172px;' href='" + result[i].titleURL + "' title='维多利陶瓷 自然石系列'gt;lt;img style='width:260px;height:172px;' alt='" + result[i].title + "' src='" + result[i].imgURL + "' /gt;lt;/agt;lt;/divgt;" + 
              "lt;p class='tit'gt;lt;a href='" + result[i].titleURL + "' title='" + result[i].title + "'gt;" + result[i].title + "lt;/agt;lt;/pgt;" + 
              "lt;div class='price'gt;lt;span class='right'gt;预订：lt;b class='yd_num'gt;" + result[i].number + "lt;/bgt;件lt;/spangt;lt;span class='bx_price'gt;￥" + result[i].Nprice + "lt;/spangt;lt;span class='store_price'gt;￥" + result[i].Oprice + "lt;/spangt;lt;/divgt; lt;/ligt;" 
 
        } 
        $(" .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); 
 
      } 
    } 
  }) 
lt;/scriptgt;

lt;pgt;lt;/pregt;lt;pgt;上面的ajax的几个属性大家映带都懂 我简单说一下 type就是提交的方式 一共有post和get两种 我用的是postlt;/pgt;lt;pgt;url就是服务器php的路径就是提交数据到的地址,data就是我们提交的数据,就是进行向服务器进行提交,然后服务器代码就是以下代码:lt;/pgt;lt;pgt;lt;/pgt;lt;pgt;lt;pre name="code" class="php"gt;lt;#63;phplt;/pgt;/** 
 * 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"=gt;111)) ; 
  echo json_encode($hotSale); 
}else{ 
  echo json_encode(array("code"=gt;402)); 
  echo json_encode($hotSale); 
}

服务器的代码 include进来的php文件就是存储数据的一个php文件下面会附上代码;我解释一下这个简单的服务器端的代码

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

这个判断就是对客户端那边发过来的数据进行的判断nbsp; 如果code和user都正确nbsp; 则给你返回数据nbsp; 如果不等几返回

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

这是在开发中和服务器端的同事商量定下来的

下面我说一下正确的时候返回来的数据

lt;pre name="code" class="php"gt;echo json_encode($hotSale);

就是这句 echo大家都知道是php里面的关键字 ,json_encode就是获取我们加载 data.php
就是这个

lt;pre name="code" class="php"gt;lt;#63;php 
/** 
 * Created by PhpStorm. 
 * User: Administrator 
 * Date: 2016-7-14 
 * Time: 19:53 
 */ 
header("Content-type:text/html;charset=utf-8"); 
$hotSaleContent1 = array( 
  "imgURL" =gt; "./百姓商城-百姓广场网上商城-郑州建材_郑州家具_郑州建材网_郑州装修公司-价格最低,保障质量_files/56945f40088bc0491409db204dab9be3e0a3.jpg", 
  "title"=gt;"南方家居 Q23025床(带床垫)", 
  "titleURL"=gt;"http://www.baixingmall.com/item/52a297380d2c004b75090030180f9be3e0a3.htm", 
  "Nprice" =gt; "1980", 
  "Oprice"=gt;"1980", 
  "number"=gt;"53" 
); 
$hotSaleContent2=array( 
  "imgURL"=gt;"./百姓商城-百姓广场网上商城-郑州建材_郑州家具_郑州建材网_郑州装修公司-价格最低,保障质量_files/56945f4d0b610045fe09f8604dab9be3e0a3.jpg", 
  "title"=gt;"富魄力 M-66型沙发", 
  "titleURL"=gt;"http://www.baixingmall.com/item/5178d9660f230049d10847f06de39be3e0a3.htm", 
  "Nprice"=gt;"3600", 
  "Oprice"=gt;"8600", 
  "number"=gt;"60" 
); 
$hotSaleContent3=array( 
  "imgURL"=gt;"./百姓商城-百姓广场网上商城-郑州建材_郑州家具_郑州建材网_郑州装修公司-价格最低,保障质量_files/56945f570129804eec0921e04dab9be3e0a3.jpg", 
  "title"=gt;"和木轩 HK8005电视柜", 
  "titleURL"=gt;"http://www.baixingmall.com/item/526a0f8704a540492c0a3960345b9be3e0a3.htm", 
  "Nprice"=gt;"3600", 
  "Oprice"=gt;"8600", 
  "number"=gt;"60" 
); 
$hotSaleContent4=array( 
  "imgURL"=gt;"./百姓商城-百姓广场网上商城-郑州建材_郑州家具_郑州建材网_郑州装修公司-价格最低,保障质量_files/56945f5f0cb640412e0aeb104d589be3e0a3.jpg", 
  "title"=gt;"怡品源12F07-12E07餐桌椅", 
  "titleURL"=gt;"http://www.baixingmall.com/item/52fec2ee0d0a4041ca08954018d89be3e0a3.htm", 
  "Nprice"=gt;"300", 
  "Oprice"=gt;"800", 
  "number"=gt;"600" 
); 
$hotSaleContent5=array( 
  "imgURL"=gt;"./百姓商城-百姓广场网上商城-郑州建材_郑州家具_郑州建材网_郑州装修公司-价格最低,保障质量_files/56945f5f0cb640412e0aeb104d589be3e0a3.jpg", 
  "title"=gt;"怡品源12F07-12E07餐桌椅", 
  "titleURL"=gt;"http://www.baixingmall.com/item/52fec2ee0d0a4041ca08954018d89be3e0a3.htm", 
  "Nprice"=gt;"300", 
  "Oprice"=gt;"800", 
  "number"=gt;"600" 
); 
$hotSaleContent6=array( 
  "imgURL"=gt;"./百姓商城-百姓广场网上商城-郑州建材_郑州家具_郑州建材网_郑州装修公司-价格最低,保障质量_files/56945f5f0cb640412e0aeb104d589be3e0a3.jpg", 
  "title"=gt;"怡品源12F07-12E07餐桌椅", 
  "titleURL"=gt;"http://www.baixingmall.com/item/52fec2ee0d0a4041ca08954018d89be3e0a3.htm", 
  "Nprice"=gt;"300", 
  "Oprice"=gt;"800", 
  "number"=gt;"600" 
); 
$hotSaleContent7=array( 
  "imgURL"=gt;"./百姓商城-百姓广场网上商城-郑州建材_郑州家具_郑州建材网_郑州装修公司-价格最低,保障质量_files/56945f570129804eec0921e04dab9be3e0a3.jpg", 
  "title"=gt;"和木轩 HK8005电视柜", 
  "titleURL"=gt;"http://www.baixingmall.com/item/526a0f8704a540492c0a3960345b9be3e0a3.htm", 
  "Nprice"=gt;"3600", 
  "Oprice"=gt;"8600", 
  "number"=gt;"60" 
); 
$hotSaleContent8=array( 
  "imgURL"=gt;"./百姓商城-百姓广场网上商城-郑州建材_郑州家具_郑州建材网_郑州装修公司-价格最低,保障质量_files/56945f4d0b610045fe09f8604dab9be3e0a3.jpg", 
  "title"=gt;"富魄力 M-66型沙发", 
  "titleURL"=gt;"http://www.baixingmall.com/item/5178d9660f230049d10847f06de39be3e0a3.htm", 
  "Nprice"=gt;"3600", 
  "Oprice"=gt;"8600", 
  "number"=gt;"60" 
); 
$hotSale=array($hotSaleContent1, 
  $hotSaleContent2,$hotSaleContent3, 
  $hotSaleContent4,$hotSaleContent5, 
  $hotSaleContent6,$hotSaleContent7, 
  $hotSaleContent8); 
lt;pgt;这里面就是所有的服务器提供的数据 然后进行获取那个数组lt;/pgt;lt;pgt;lt;span style="font-family: Arial, Helvetica, sans-serif;"gt;$hotSale;lt;/pgt;lt;pgt;然后传到我们html的ajax的data里面即使这个:lt;/spangt;lt;/pgt;

lt;span style="font-family: Arial, Helvetica, sans-serif;"gt;lt;/spangt;lt;pre name="code" class="html"gt;success:function(data){ 
      var result=eval("("+data+")"); 
      alert(data);

（编辑：PHP编程网 - 襄阳站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

1/2

尾页

数据分析常见的误区有	远程访问装有GPU的电脑
数据驱动业务的18个有	科技化应用雷达互动投