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" type="text/css" media="screen"> </head> <body> <script type="text/javascript" src="https://www.jb51.net/jquery-3.0.0.min.js"></script> <div> <div> <ul> <li> <div><a href="https://www.baixingmall.com/item/565521bf0305c044a508ade00f539be3e0a3.htm" title=" "><img alt="维多利陶瓷 自然石系列" src="https://image01.baixingstatic.com/system/56945f870cfe00463b0acfe04c9d9be3e0a3.jpg"></a> </div> <p><a href="https://www.baixingmall.com/item/565521bf0305c044a508ade00f539be3e0a3.htm" title=""></a></p> <div><span>预订：<b>44</b>件</span><span>￥62.1</span><span>￥128</span></div> </li> </ul> </div> </div>
</pre><pre>上面的代码li部分其实是有八个 实现的是这样的界面
因为li代码都是一样的 所以就不一一列举了 大家明白就行了
ok 这里的都明白;下面就是用ajax进行交互 就是js的代码
在下面进行加入一个js的代码块
<pre><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 >" + "<div><a href='" + result[i].titleURL + "' title='维多利陶瓷 自然石系列'><img alt='" + result[i].title + "' src='" + result[i].imgURL + "' /></a></div>" + "<p><a href='" + result[i].titleURL + "' title='" + result[i].title + "'>" + result[i].title + "</a></p>" + "<div><span>预订：<b>" + result[i].number + "</b>件</span><span>￥" + result[i].Nprice + "</span><span>￥" + result[i].Oprice + "</span></div> </li>" } else { // var str = "<listyle='margin-right: 0px' >" + "<div><a href='" + result[i].titleURL + "' title='维多利陶瓷 自然石系列'><img alt='" + result[i].title + "' src='" + result[i].imgURL + "' /></a></div>" + "<p><a href='" + result[i].titleURL + "' title='" + result[i].title + "'>" + result[i].title + "</a></p>" + "<div><span>预订：<b>" + result[i].number + "</b>件</span><span>￥" + result[i].Nprice + "</span><span>￥" + 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><?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>echo json_encode($hotSale);
就是这句 echo大家都知道是php里面的关键字 ,json_encode就是获取我们加载 data.php
就是这个