jQuery sends a request to the PHP server through Ajax and returns JSON data

This article mainly introduces jQuery to send requests to the PHP server through Ajax and return JSON data. The knowledge points designed include jquery, ajax, php, and json. Interested friends can learn about jquery ajax return json

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.

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 that jQuery sends a request to the PHP server through Ajax and returns JSON data. Readers reading this article should have relevant knowledge of jQuery, Ajax, and PHP and be able to use them skillfully.

XHTML

<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> 
<p 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> 
</p>

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 3499910bf9dac5ae3c52d5ede7383485 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 one yourself. Exterior.

jQuery

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

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

The next step is to 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 3499910bf9dac5ae3c52d5ede7383485 tag in the user list. When the user 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 the background server.php receives the front-end Ajax request, it connects to the database through the passed parameters and queries the user table, converting the corresponding user information into an array. $list, and finally convert the array into JSON data. For information about the operation of PHP and JSON, you can view the articles collected on this site: Application of JSON in PHP. 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, 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;

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

SSH Jquery Ajax framework integration

The similarities and differences between ajax and traditional web development

Detailed explanation of $.ajax() method parameters in Jquery

The above is the detailed content of jQuery sends a request to the PHP server through Ajax and returns JSON data. For more information, please follow other related articles on the PHP Chinese website!