jQuery returns JSON data via Ajax_jquery

The server-side PHP reads MYSQL data, converts it into JSON data, passes it to the front-end Javascript, and operates the JSON data. This article will demonstrate through examples how jQuery sends a request to the PHP server through Ajax and returns JSON data.

JSON (JavaScript Object Notation) is a lightweight data exchange format. Easy for humans to read and write, and easy for machines to parse and generate. JSON plays an excellent role in the process of front-end and back-end interaction. Please continue reading the tutorial below.

<ul id="userlist"> 
  <li><a href="#" rel="1">张三</a></li> 
  <li><a href="#" rel="2">李四</a></li> 
  <li><a href="#" rel="3">王五</a></li> 
</ul> 
<div id="info"> 
  <p>姓名：<span id="name"></span></p> 
  <p>性别：<span id="sex"></span></p> 
  <p>电话：<span id="tel"></span></p> 
  <p>邮箱：<span id="email"></span></p> 
</div> 

In the example, a user name list ul#userlist and a user details layer #info are displayed. It is worth noting that I set the attribute "rel" and assign a value to each tag. This is very important and will be used in jQuery. The effect I want to achieve is: when you click on the name of any user in the user list, the user's detailed information, such as phone number, EMAIL, etc., will be displayed immediately.

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 display appearance of the user list and user details. You can also design a good-looking appearance yourself.

jQuery

Before using jQuery, don’t forget to make sure the jQuery library is loaded first.

Next, let’s start writing 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 tag in the user list. When the user's name is clicked, the following operations are performed: Get the value of the attribute "rel" of the current tag and form a data string: var data = "action=getlink&id=" hol, and then send a JSON request to the server server.php through ajax. After getting the background response, the JSON data is returned, and the obtained data is displayed in the user details.

PHP

After receiving the Ajax request from the front-end, the backend server.php connects to the database through the passed parameters and queries the user table, converts the corresponding user information into an array $list, and finally converts the array into JSON data. For information on the operation of PHP and JSON, you can view the articles collected on this site:. The following is the detailed code of server.php. The data connection part is omitted. Please establish the data connection by yourself.

include_once("connect.php"); //连接数据库 
$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); 
} 

Through this article, you can know that jQuery sends JSON requests to the server through Ajax. The method $.getJSON is very convenient and simple. And the data returned by the server can be parsed to obtain the contents of the corresponding fields, which is easier and faster to process than a large string of strings returned by an 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; 

The above is the entire content of this article, I hope you all like it.