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

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

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

html代码和界面

 </pre><pre name="code" class="html">上面的代码li部分其实是有八个 实现的是这样的界面

因为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> 

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

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

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

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

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

这个就是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写活了!!!

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