Using PHP as the interface of server and Web front-end to interact _php instance

Source: Internet
Author: User

The interaction between PHP and Web pages is an important means to realize the interaction between PHP website and user. The scholar who wants to view this article first look at the basics of PHP, because today we use this thing, now learn to sell it. The basics of the PHP server will be updated later!

1. First you have to have an interface I use my project to develop a simple interface to intercept down to explain! Project Confidential please don't * * *, 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=" Tex t/html; Charset=utf-8 "/> <title> people 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 St Yle= "Width:260px;height:172px, "alt=" Victoria Ceramic Natural Stone series "src=" http://image01.baixingstatic.com/system/56945f870cfe00463b 0acfe04c9d9be3e0a3.jpg ></a> </div> <p class= ><a href= Http://www.baixingma Ll.com/item/565521bf0305c044a508ade00f539be3e0a3.htm "title=" "></a></p> <di V class= "Price" ><span class= "right" > Reservation: <b class= "Yd_num" >44</b> parts </span><span cl 
     ass= "Bx_price" >¥62.1</span><span class= "Store_price" >¥128</span></div> </li>  </ul> </div> </div>

</pre><pre name= "code" class= "HTML" > above, there are actually eight implementations of this interface

Because the Li code is the same, so not one of the list of people understand the line

Ok here are all clear; The following is the use of Ajax interaction is JS code

Add a JS 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"}, Su 
      Ccess: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= ' Victor Li Ceramic Natural Stone series ' ><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= ' ri Ght ' > Reservation: <b class= ' yd_num ' > "+ result[i].number +" </b> parts </span&gt<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:172p x; ' href= ' "+ Result[i].titleurl +" ' title= ' Victoria Ceramic Natural Stone series ' ><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 ' > 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+ ") a"). attr ("title", Result[i].title); 
 
      $ (". Hot_sale_ul li:eq (" +i+ ") a"). attr ("title", Result[i].title); 
 }}) </script>
<p></pre><p> above Ajax Several properties you know, I'm just saying, type is the way to commit. Altogether there are post and get two kinds of post</p><p>. URL is the server PHP path is to submit data to the address, data is our submission, is to submit to the server, and then the server code is the following code:</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); 
} 

The server's code include the PHP file in which the data is stored in a PHP file that is appended to the code; Let me explain this simple server-side code

if ($_post["code"]==201 && $_post["user"]== "admin") { 
//  echo Json_encode (Array ("code" =>111)); 
  echo Json_encode ($hotSale); 

The judgment is to judge the data from the client side. If both code and user are correct, return the data if you don't wait for a few returns.

else{ 
  Echo json_encode (Array ("code" =>402)); 
  echo Json_encode ($hotSale); 
} 

This is in development and the server side of the colleagues discussed the

Now I'm going to say the right time to return the data

<pre name= "code" class= "PHP" >echo json_encode ($hotSale);

That's the echo we all know is PHP inside the keyword, json_encode is to get us loaded data.php
That's it

<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"); $hotSaleContent 1 = Array ("Imgurl" =>)./People Mall-People Square online mall-Zhengzhou Building Materials _ Zhengzhou Furniture _ Zhengzhou Building Materials Network _ Zhengzhou decoration Company-Lowest price, guarantee quality _files/ 56945f40088bc0491409db204dab9be3e0a3.jpg "," title "=>" South home Q23025 bed (with mattress) "," Titleurl "=>" http:// Www.baixingmall.com/item/52a297380d2c004b75090030180f9be3e0a3.htm "," Nprice "=>" 1980 "," Oprice "=>" 1980 "," 
Number "=>" 53 "); $hotSaleContent 2=array ("Imgurl" =>)./People Mall-People's Square online mall-Zhengzhou Building Materials _ Zhengzhou Furniture _ Zhengzhou Building Materials Network _ Zhengzhou decoration Company-Lowest price, guarantee quality _files/ 56945f4d0b610045fe09f8604dab9be3e0a3.jpg "," "title" => "bold M-66-style sofa", "Titleurl" => "http://www.baixingmall.com/" 
Item/5178d9660f230049d10847f06de39be3e0a3.htm "," Nprice "=>" 3600 "," Oprice "=>" 8600 "," number "=>" 60 "); $hotSaleContent 3=array ("Imgurl" =>)./People Mall-People's Square online mall-Zhengzhou Building Materials _ Zhengzhou Furniture _ Zhengzhou Building Materials Network _ Zhengzhou decoration Company-Lowest price, guarantee quality _files/ 56945f570129804eec0921e04dab9be3e0a3.jpg "," title "=>" and Mu Xuan HK8005 TV cabinet "," Titleurl "=>" http://www.baixingmall.com/item/ 
526a0f8704a540492c0a3960345b9be3e0a3.htm "," Nprice "=>" 3600 "," Oprice "=>" 8600 "," number "=>" 60 "); $hotSaleContent 4=array ("Imgurl" =>)./People Mall-People's Square online mall-Zhengzhou Building Materials _ Zhengzhou Furniture _ Zhengzhou Building Materials Network _ Zhengzhou decoration Company-Lowest price, guarantee quality _files/ 56945f5f0cb640412e0aeb104d589be3e0a3.jpg "," "title" => "Yi Source 12f07-12e07 dining tables and chairs", "Titleurl =>" http:// Www.baixingmall.com/item/52fec2ee0d0a4041ca08954018d89be3e0a3.htm "," Nprice "=>", "Oprice" => "," Numb 
ER "=>" 600 "); $hotSaleContent 5=array ("Imgurl" =>)./People Mall-People's Square online mall-Zhengzhou Building Materials _ Zhengzhou Furniture _ Zhengzhou Building Materials Network _ Zhengzhou decoration Company-Lowest price, guarantee quality _files/ 56945f5f0cb640412e0aeb104d589be3e0a3.jpg "," "title" => "Yi Source 12f07-12e07 dining tables and chairs", "Titleurl =>" http:// Www.baixingmall.com/item/52fec2ee0d0a4041ca08954018d89be3e0a3.htm "," Nprice "=>", "Oprice" => "," Numb 
ER "=>" 600 "); $hotSaleContent 6=array ("Imgurl" =>)./People Mall-People's Square online mall-Zhengzhou Building Materials _ Zhengzhou Furniture _ Zhengzhou Building Materials Network _ Zhengzhou decoration Company-Lowest price, guarantee quality _files/56945F5f0cb640412e0aeb104d589be3e0a3.jpg "," "title" => "Yi Source 12f07-12e07 dining tables and chairs", "Titleurl =>" http:// Www.baixingmall.com/item/52fec2ee0d0a4041ca08954018d89be3e0a3.htm "," Nprice "=>", "Oprice" => "," Numb 
ER "=>" 600 "); $hotSaleContent 7=array ("Imgurl" =>)./People Mall-People's Square online mall-Zhengzhou Building Materials _ Zhengzhou Furniture _ Zhengzhou Building Materials Network _ Zhengzhou decoration Company-Lowest price, guarantee quality _files/ 56945f570129804eec0921e04dab9be3e0a3.jpg "," title "=>" and Mu Xuan HK8005 TV cabinet "," Titleurl "=>" http:// Www.baixingmall.com/item/526a0f8704a540492c0a3960345b9be3e0a3.htm "," Nprice "=>" 3600 "," Oprice "=>" 8600 "," Nu 
Mber "=>" "60"); $hotSaleContent 8=array ("Imgurl" =>)./People Mall-People's Square online mall-Zhengzhou Building Materials _ Zhengzhou Furniture _ Zhengzhou Building Materials Network _ Zhengzhou decoration Company-Lowest price, guarantee quality _files/ 56945f4d0b610045fe09f8604dab9be3e0a3.jpg "," "title" => "bold M-66-style sofa", "Titleurl" => "http://www.baixingmall.com/" 
Item/5178d9660f230049d10847f06de39be3e0a3.htm "," Nprice "=>" 3600 "," Oprice "=>" 8600 "," number "=>" 60 "); $hotSale =array ($hotSaleContent 1, $hotSaleContent 2, $hotSaleContent 3, $hotSaleCOntent4, $hotSaleContent 5, $hotSaleContent 6, $hotSaleContent 7, $hotSaleContent 8); <p> This is where all the servers provide the data and then proceed to get that array </p><p><span style= "font-family:arial, Helvetica, Sans-serif;" 
 > $hotSale;</p><p> is then uploaded to our HTML Ajax data even though this:</span></p>
<span style= "font-family:arial, Helvetica, Sans-serif;" ></span><pre name= "code" class= "HTML" >success:function (data) { 
      var result=eval ("(" +data+) "); 
      

This is the Ajax success of the time to execute the function funcation () inside the data to get to our array, in fact, he is a JSON file, just like the array format we also have to convert
<span style= "font-family:arial, Helvetica, Sans-serif;" ></span><pre name= "code" class= "HTML" >var result=eval ("(" +data+) "); This sentence is to convert him into a truly familiar array of arrays;

And then we're going to need eight data for traversal.

<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= ' Victoria Ceramic Natural Stone series ' ><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 ' > Booking: <b class= ' yd_num ' > "+ result[i].number +" </b> parts </span><span class= ' bx_price ' >¥ ' + result[i] . Nprice + "</span><span class= ' Store_price ' >¥" + result[i]. Oprice + "</span></div> </li>" 
 
        

The result.length is our maximum length,

The last traversal will output eight, but someone must ask how you loaded the server's array into the HTML; The following is an explanation of the contents of 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;hei ght:172px ' href= ' "+ Result[i].titleurl +" ' title= ' Victoria Ceramic Natural Stone series ' ><img style= ' width:260px;height:172px; ' alt= ' "+ R Esult[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 ' > Reservation: <b class= ' yd_num ' >" + result[i].number + "</b& GT, Pieces </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 then add a "+ +" to each row. We all understand that this is the link in JS; the data in the inside is replaced with
result[i].xxx; I is the data that traverses each of the different I get different data from the server JSON, because it can be used to get the number of groups;
XXX refers to each of the array keys, to get inside the value of the attribute inside, the HTML is written alive!!!

After loading the display is the same as the previous interface!! The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

Tags Index: