jquery sends requests to the PHP server via AJAX and returns JSON data

On (JavaScript Object Notation) is a lightweight data interchange format. Easy to read and write, but also easy to machine parse and generate. JSON plays a very good role in the process of pre-background interaction. Go ahead and look at the tutorial.

Xhtml

<ulId="UserList">
<li><ahref="#"Rel="1"> Zhang San</a></li>
<li><ahref="#"Rel="2"> John Doe</a></li>
<li><ahref="#"Rel="3"> Harry</a></li>
</ul>
<divId="Info">
<p> Name:<spanId="Name"></span></p>
<p> Gender:<spanId="Sex"></span></p >  
    <p> Tel: <span id= "tel" Span class= "Html__tag_start" >></span></p >  
    <p> mailbox: <span id= "email" Span class= "Html__tag_start" >></span></p >  
 </DIV>&NBSP; 
       

instance, displays a list of user names Ul#userlist, a user details layer #info. It is important to note that I set the attribute "rel" to each <a> tag and assign a value, which is significant and will be used in jquery. I want to achieve the effect is: when clicking on the user list of any user's name, will immediately display the user's details, such as phone, email and so on.

Css

#userlist {Margin4px;Height42PX}
#userlistli{FloatLeftWidth80px;Line-height:42px;Height42px;Font-size:14px;
font-weight:BOLD}  
  #info { Span class= "Css__property" >clear:left; padding:6px; border:1px solid  #b6d6e6;  background: #e8f5fe}  
  #info  p{line-height:24PX}  
  #info  p span{font-weight:BOLD}  
            

CSS sets the display of the user list and user details, and you can also design a nice looking look.

Jquery

Before using jquery, don't forget to make sure you load the jquery library first.

 
<script type="text/javascript" src="../js/jquery.js"></script> 

Then we start writing the jquery code.

$(function (){
$("#userlist a"). Bind ("Click",function (){
var hol = $ (This). attr ("rel");
var data ="Action=getlink&id=" +hol;

$.getjson ( "server.php", Data, function (JSON) {   
              $ ( "#name"). HTML (json.name);   
              $ ( "#sex"). HTML (json.sex);   
              $ ( "#tel"). HTML (Json.tel);  
             $ ( "#email "). HTML (json.email);   
        });    
       

I bind a click event to each <a> tag of the user list, and when you click the user name, do the following: Gets the value of the current label's property "rel" and makes up a data string: var data = "Action=getlink&id=" + Hol, and then sends the JSON request through Ajax to the server server.php, gets the background response, returns the JSON data, and displays the resulting data in the user details.

Php

Background server.php get the AJAX request of the front end, connect the database by the parameters passed and query the user table, convert the corresponding user information into an array $list, and finally convert the array into JSON data. The operation of PHP and JSON can be viewed from the articles collected on this site: The application of JSON in PHP. The following is the detailed code of the server.php, where the data connection part is omitted, please make your own data connection.

Include_once ("connect.php");Connecting to a database
$action=$_get[action];
$Id=intval ($_get[id]);
If$action=="GetLink") {
$Query=mysql_query ("SELECT * from user where id= $id");
 $row=mysql_fetch_array ($ query);   
     $list=array ( "name" =>$ row[username], "sex" =>$< Span class= "php__variable" >row[sex], "tel" =>$row[tel], "email" =>$ row[email]);   
     echo  json_encode ($list);   
}  
   

This article can be used to know that jquery sends JSON requests to the server via Ajax, and the method $.getjson is very easy to use. The data returned by the server can be parsed to get the content of the corresponding field, which is easier and quicker to handle than a string of strings returned by the HTML request.

Finally, the MySQL table structure is attached

 
CREATE TABLE IF NOT EXISTS `user` ( 
  `id` int(11) NOT NULL auto_increment, 
  `username` varchar(100) NOT NULL, 
  `sex` varchar(6) NOT NULL, 
  `tel` varchar(50) NOT NULL, 
  `email` varchar(64) NOT NULL, 
  PRIMARY KEY  (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8; 

jquery sends requests to the PHP server via AJAX and returns JSON data