首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 PHP

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

Posted in PHP onOctober 31, 2016

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部分其实是有八个 实现的是这样的界面

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

因为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做服务器和web前端的界面进行交互

- Author -

张张张的博客

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

PHP 相关文章推荐
PHP安装攻略:常见问题解答（三）
Oct 09 PHP
PHP中文件缓存转内存缓存的方法
Dec 06 PHP
PHP面向对象学习笔记之一 基础概念
Oct 06 PHP
php 强制下载文件实现代码
Oct 28 PHP
php自定义hash函数实例
May 05 PHP
分享10段PHP常用代码
Nov 11 PHP
Joomla使用Apache重写模式的方法
May 04 PHP
php简单复制文件的方法
May 09 PHP
PHP实现对二维数组某个键排序的方法
Sep 14 PHP
PHP实现mysqli批量执行多条语句的方法示例
Jul 22 PHP
php实现微信公众平台发红包功能
Jun 14 PHP
PHP删除数组中特定元素的两种方法
Feb 28 PHP
php将服务端的文件读出来显示在web页面实例
Oct 31 #PHP
PDO的安全处理与事物处理方法
Oct 31 #PHP
PHP仿微信发红包领红包效果
Oct 30 #PHP
PHPCMS忘记后台密码的解决办法
Oct 30 #PHP
php set_include_path函数设置 include_path 配置选项
Oct 30 #PHP
php 截取utf-8格式的字符串实例代码
Oct 30 #PHP
php mysql like 实现多关键词搜索的方法
Oct 29 #PHP
装饰器(1) 读取(1) 查找算法(1) 网页解析(1) decorator(1) translation(2) 矩阵(1) 数据保存(1) bs4(1) 数组(5)
You might like
文件上传程序的全部源码
2006/10/09 PHP
php批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
php中批量替换文件名的实现代码
2011/07/20 PHP
php抓取页面的几种方法详解
2013/06/17 PHP
PHP使用imagick读取PDF生成png缩略图的两种方法
2014/03/20 PHP
php页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
php内嵌函数用法实例
2015/03/20 PHP
PHP中使用hidef扩展代替define提高性能
2015/04/09 PHP
php实现的任意进制互转类分享
2015/07/07 PHP
漂亮的提示信息（带箭头）
2007/03/21 Javascript
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
解决jquery submit()提交表单提示：f[s] is not a function
2013/01/23 Javascript
jQuery获取浏览器中的分辨率实现代码
2013/04/23 Javascript
AngularJS 遇到的小坑与技巧小结
2016/06/07 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
2016/10/18 Javascript
js实现图片切换（动画版）
2016/12/25 Javascript
微信小程序 二维码canvas绘制实例详解
2017/01/06 Javascript
WebSocket实现简单客服聊天系统
2017/05/12 Javascript
vue better-scroll插件使用详解
2018/01/25 Javascript
ES6使用export和import实现模块化的方法
2018/09/10 Javascript
vue 配置多页面应用的示例代码
2018/10/22 Javascript
Vue.js 中的 v-show 指令及用法详解
2018/11/19 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
微信小程序页面调用自定义组件内的事件详解
2019/09/12 Javascript
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
python使用os.listdir和os.walk获得文件的路径的方法
2017/12/16 Python
从零开始的TensorFlow+VScode开发环境搭建的步骤(图文)
2020/08/31 Python
如何估计一张表的大小（假设该表中有1万条数据）
2016/03/27 面试题
旅游业大学生创业计划书
2014/01/31 职场文书
党建工作经验交流材料
2014/05/25 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
中小企业员工手册范本
2015/05/14 职场文书
小学运动会入场词
2015/07/18 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书