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

时间：2022-09-29 14:49:42

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

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

html代码和界面

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!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部分其实是有八个 实现的是这样的界面

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

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

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

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

  1. <pre name="code" class="javascript"><script type="text/javascript"> 
  2.   var str=""; 
  3.   $.ajax({ 
  4.     type:"post", 
  5.     url:"postdemo.php", 
  6.     data:{ 
  7.       "code":"201", 
  8.       "user":"admin" 
  9.     }, 
  10.     success:function(data){ 
  11.       var result=eval("("+data+")"); 
  12.       alert(data); 
  13.       for(var i=0;i<result.length;i++){ 
  14.         if ((i+1)%4){ 
  15.           var str = "<li class='hot_sale_li left' >" + 
  16.               "<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>" + 
  17.               "<p class='tit'><a href='" + result[i].titleurl + "' title='" + result[i].title + "'>" + result[i].title + "</a></p>" + 
  18.               "<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>" 
  19.   
  20.         } 
  21.         else { 
  22. // 
  23.           var str = "<li class='hot_sale_li left'style='margin-right: 0px' >" + 
  24.               "<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>" + 
  25.               "<p class='tit'><a href='" + result[i].titleurl + "' title='" + result[i].title + "'>" + result[i].title + "</a></p>" + 
  26.               "<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>" 
  27.   
  28.         } 
  29.         $(" .index_hot_sale #hot_sale").append(str); 
  30. //       var onetitle = result[i].title; 
  31. //        $(".hot_sale_ul li:eq("+i+") a").attr("title",result[i].title); 
  32. //        $(".hot_sale_ul li:eq("+i+") a").attr("title",result[i].title); 
  33.   
  34.       } 
  35.     } 
  36.   }) 
  37. </script> 
  1. <p></pre><p>上面的ajax的几个属性大家映带都懂 我简单说一下 type就是提交的方式 一共有post和get两种 我用的是post</p><p>url就是服务器php的路径就是提交数据到的地址,data就是我们提交的数据,就是进行向服务器进行提交,然后服务器代码就是以下代码:</p><p></p><p><pre name="code" class="php"><?php</p>/** 
  2.  * created by phpstorm. 
  3.  * user: administrator 
  4.  * date: 2016-7-15 
  5.  * time: 17:28 
  6.  */ 
  7. include "data.php"; 
  8. if($_post["code"]==201 && $_post["user"]=="admin"){ 
  9. //  echo json_encode(array("code"=>111)) ; 
  10.   echo json_encode($hotsale); 
  11. }else{ 
  12.   echo json_encode(array("code"=>402)); 
  13.   echo json_encode($hotsale); 
  14. } 
 

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

?
1
2
3
4
if($_post["code"]==201 && $_post["user"]=="admin"){
//  echo json_encode(array("code"=>111)) ;
  echo json_encode($hotsale);
}

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

?
1
2
3
4
else{
  echo json_encode(array("code"=>402));
  echo json_encode($hotsale);
}

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

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

?
1
<pre name="code" class="php">echo json_encode($hotsale);

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<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>
?
1
2
3
<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数组;

然后就是我们要八条数据进行遍历

  1. <pre name="code" class="html">for(var i=0;i<result.length;i++){      
  2.           var str = "<li class='hot_sale_li left' >" + 
  3.               "<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>" + 
  4.               "<p class='tit'><a href='" + result[i].titleurl + "' title='" + result[i].title + "'>" + result[i].title + "</a></p>" + 
  5.               "<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>" 
  6.   
  7.         } 

result.length就是我们的最大长度了,

最后遍历之后就会输出八条了;不过肯定有人问 你怎么把服务器传过来的数组加载到html中的;下面对上面的那个var str里面的内容讲解一下:

  1. <pre name="code" class="html" style="font-family: arial, helvetica, sans-serif;">var str = "<li class='hot_sale_li left' >" + 
  2.               "<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>" + 
  3.               "<p class='tit'><a href='" + result[i].titleurl + "' title='" + result[i].title + "'>" + result[i].title + "</a></p>" + 
  4.               "<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>" 
  5.   
  6.         } 

大家可以看到这是一个自定义的数组然后把每一行都加一个"++"连起来 大家都明白,这是js中的链接方式;里面的数据替换是用的是
result[i].xxx; i就是进行遍历的数据 每一个不同的i从服务器json里面获取不同的数据 因为转换成数组了 就可以用来获取了;
xxx就是指的是每一个数组键,来获取里面的值 放到属性里面,就把这个html写活了!!!

加载完显示就是和上一个界面一样的!!以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。

标签：

相关文章