jQuery returns JSON data via Ajax

Server PHP reads MYSQL data, converts it to JSON data, passes it to front-end Javascript, and operates on JSON data. This article demonstrates by example that jQuery sends a request to the PHP server via Ajax and returns JSON data.

JSON(JavaScript Object Notation) is a lightweight data interchange format. Easy for people to read and write, and easy for machines to parse and generate. JSON plays an excellent role in front and background interaction. Read on for the tutorial.

<ul id="userlist"> 
  <li><a href="#" rel="1"> zhang 3</a></li> 
  <li><a href="#" rel="2"> li 4</a></li> 
  <li><a href="#" rel="3"> The king 5</a></li> 
</ul> 
<div id="info"> 
  <p> Name: <span id="name"></span></p> 
  <p> Gender: <span id="sex"></span></p> 
  <p> Telephone: <span id="tel"></span></p> 
  <p> Email address: <span id="email"></span></p> 
</div> 

In the example, a list of user names ul#userlist and a user details layer #info are displayed. It's worth noting that I gave each one < a > The tag sets and assigns the property "rel", which is important and will be used in jQuery. What I want to achieve is that when I click the name of any user in the user list, the user's details, such as phone number, EMAIL, etc., will instantly appear.

CSS

#userlist{margin:4px; height:42px} 
#userlist li{float:left; width:80px; line-height:42px; height:42px; font-size:14px; 
font-weight:bold} 
#info{clear:left; padding:6px; border:1px solid #b6d6e6; background:#e8f5fe} 
#info p{line-height:24px} 
#info p span{font-weight:bold} 

CSS sets the appearance of the user list and user details, or you can design a nice look yourself.

jQuery

Before using jQuery, make sure the jQuery library is loaded.
< script type="text/javascript" src="../js/jquery.js" > < /script >
Let's 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 give the user a list of each < a > Each tag is bound to an click event. When the user name is clicked, do the following: Get the value of the attribute "rel" for the current tag and form a data string: var data = "action=getlink & id="+hol, then send JSON request to server server.php through ajax. After getting the background response, return JSON data and display the obtained data in user details.

PHP

After the background ES83en. php gets the front-end Ajax request, it connects to the database and queries the user table through the passed parameters, converts the corresponding user information into an array of $list, and finally converts the array into JSON data. For the operation of PHP and JSON, please check out the articles collected in this site:. The following is the detailed code of ES90en.php, in which the data connection part is omitted, please establish the data connection by yourselves.

include_once("connect.php"); // Connect to 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"=>$row[sex],"tel"=>$row[tel],"email"=>$row[email]); 
  echo json_encode($list); 
} 

This article shows that jQuery sends JSON requests to the server via Ajax, using the method $.getJSON is very convenient and simple. In addition, the data returned by the server can be parsed to obtain the content of the corresponding field, which is easier and faster to process than the 1 large string of strings returned by HTML request.
Finally, attach the mysql table structure

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; 

This is the end of this article, I hope you enjoy it.