JQuery returns JSON data through Ajax, and jqueryajax returns json

JQuery returns JSON data through Ajax, and jqueryajax returns json

The server PHP reads MYSQL Data, converts it to JSON data, passes it to the front-end Javascript, and operates JSON data. This document uses examples to demonstrate 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 reading and writing, and easy for machine parsing and generation. JSON plays an outstanding role in the interaction between the frontend and backend. Next, let's take a look at the tutorial.

<Ul id = "userlist"> <li> <a href = "#" rel = "1"> Michael </a> </li> <a href = "#" rel = "2"> li Si </a> </li> <a href = "#" rel = "3"> Wang Wu </a> </li> </ul> <div id = "info"> <p> Name: <span id = "name"> </span> </p> <p> gender: <span id = "sex"> </span> </p> <p> Tel: <span id = "tel"> </span> </p> <p> Email: <span id = "email"> </span> </p> </div>

The instance displays a user name list ul # userlist and a user details layer # info. It is worth noting that I set the attribute "rel" for each <a> label and assign values. This is very important and will be used in jQuery. The effect I want to achieve is that when I click the name of any user in the user list, the details of the user, such as phone number and EMAIL, will be displayed instantly.

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 nice appearance by yourself.

JQuery

Before using jQuery, do not forget to ensure that the jQuery library is loaded.
<Script type = "text/javascript" src = "../js/jquery. js"> </script>
Next we will 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);     });   }); }); 

Each <a> tag in the user list is bound with a click event. When you click a user name, perform the following operations: Get the attribute "rel" value of the current tag, and form a data string: var data = "action = getlink & id =" + hol, and then send it to the server through ajax. php sends a JSON request. After receiving a background response, it returns JSON data and displays the data in the user details.

PHP

Backend server. after obtaining the front-end Ajax request, 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 to JSON data. For PHP and JSON operations, you can view the articles collected on this site :. The following is the detailed code of server. php, in which the data connection is omitted. Please establish your own data connection.

Include_once ("connect. php "); // connect to the 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 how to use $. getJSON to send a JSON request to the server through Ajax. In addition, the data returned by the server can be parsed to obtain the content of the corresponding field, which is convenient and convenient compared with a large string returned by the HTML request.
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 all the content of this article. I hope you will like it.