English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
PHP and Web page interaction is an important means to achieve interaction between PHP websites and users. It is recommended that scholars who want to read this article first review the basic knowledge of PHP, because we will use this thing today, and sell it on the spot. The basic knowledge of php server will be updated later!
1.Firstly, you need to have an interface. Here, I use a simple interface from my project development to illustrate!Project secret, please do not**, you know!
HTML code and interface
<!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>People's Shopping Mall</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="[#0#]"
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">Reservation：<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">The code for the li part actually has eight, which implements the following interface.
Since the li code is the same, I will not list them one by one. You understand that's enough.
Okay, everything here is clear; the following is the use of AJAX for interaction, which is the JavaScript code.
Add a JavaScript code block below.
<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='[#1#]' 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'>Reservation：<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='[#1#]' 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'>Reservation：<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+)").attr("title",result[i].title);
// $(".hot_sale_ul li:eq("+i+)").attr("title",result[i].title);
}
}
})();
</script>
<p></pre><p>Most of the properties of the above AJAX are understandable. I will briefly explain them: type is the method of submission, which has two types: POST and GET. I use POST</p><p>The URL is the path of the server's PHP, which is the address to which the data is submitted, and the data is the data we submit. Then the server code is as follows:</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);
}
echo json_encode(array("code"=>402));
echo json_encode($hotSale);
}
The PHP file included by the server's code is a PHP file used to store data. The code will be attached below; I will explain this simple server-side code.
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>This is where all the data provided by the server is then retrieved for that array</p><p><span style="font-family: Arial, Helvetica, sans-serif;">$hotSale;</p><p>Then pass it to the data inside our HTML AJAX even if this:</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);
This is the function executed when the AJAX call is successful, funcation() inside which the data of the array is obtained, which is actually a JSON file, but in the format of an array we still need to convert it
<span style="font-family: Arial, Helvetica, sans-serif;"></span><pre name="code" class="html">var result=eval("("+data+")"); This is to convert it into the familiar array array we are familiar with;
Then it is to iterate through eight data items
<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='[#1#]' 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'>Reservation：<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 is our maximum length
After the final iteration, eight lines will be output; however, someone may ask how you load the array sent from the server into HTML; the following is an explanation of the content inside the var str above:
<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='[#1#]' 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'>Reservation：<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>"
}
You can see that this is a custom array, and add a " to each line++Link together, everyone understands, this is the link method in JavaScript; the data replacement uses
result[i].XXX; i is the data being traversed. Each different i gets different data from the server json because it has been converted into an array, so it can be used to get it;
XXX refers to each array key to get the value inside and put it into the attribute, and then this html comes alive!!!
It displays the same as the previous interface after loading!! That's all for this article. I hope it will be helpful to everyone's learning, and I also hope everyone will support the Yanaing Tutorial more.
Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#w3Please replace # with @ when sending an email to report abuse, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.