JQuery ajax+php return JSON data Instance tutorial

JSON (JavaScript Object notation) is a lightweight data interchange format. Easy for people to read and write, but also easy to machine parsing and generation. JSON plays a very good role in the process of background interaction in the front. Please go on to see the tutorial.

MySQL table structure

The code is as follows	Copy Code
CREATE TABLE IF not EXISTS ' user ' ( ' id ' int (one) not NULL auto_increment, ' username ' varchar not NULL, ' Sex ' varchar (6) Not NULL, ' Tel ' varchar not NULL, ' Email ' varchar not NULL, PRIMARY KEY (' id ') ) Engine=myisam DEFAULT Charset=utf8;

Xhtml

code is as follows	copy code
<ul  id= "UserList" >     <li><a href= "#"  rel= "1" > John </a> </LI>&NBSP    <li><a href= "#"  rel= "2" > Dick </a></li> &NBSP    <li><a href= "#"  rel= "3" > Harry </a></li>  </UL>&NBSP <div id= "info" >     <p> Name: <span id= "Name" ></span></p>     <p> sex: <span id= "Sex" ></span>< /P>&NBSP    <p> Tel: <span id= "Tel" ></span></p>     <p> Email: <span id= "email" ></span></p>  </div>

instance, a user name list ul#userlist, a user detail layer #info, is displayed. Notably, I set the attribute "rel" to each <a> tag and assign it, which is important and will be used in jquery. I want to achieve the effect is: when clicked on the user list of any user's name, will immediately display the user's details, such as telephone, email and so on.

Css

The code is as follows	Copy Code
#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 user list and user details to display the appearance, you can also design a good-looking look.

Jquery

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

The code is as follows	Copy Code
<script type= "Text/javascript" src= ". /js/jquery.js "></script>

Next you start writing the jquery code.

The code is as follows	Copy 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> label in the user list, and when you click the user's name, do the following: Get the value of the current label's property "rel" and form a data string: var data = "Action=getlink&id=" + Hol, then sends the JSON request via AJAX to the server server.php, gets the background response, returns the JSON data, and displays the resulting data in the user's details.

Php

Backstage server.php gets the AJAX request from the front end, connects the database by the parameters passed and queries the user table, converts the corresponding user information into an array $list, and finally converts the array to JSON data. About PHP and JSON operations can view the article collected in this site: PHP application of JSON. The following is the detailed code of the server.php, where the data connection is omitted, please set up your own data connection.

code is as follows	copy code
Include_ Once ("connect.php");  //connection 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);   }

By using this article to know that jquery sends JSON requests via AJAX to the server, it's easy to use the method $.getjson. And the data returned by the server can be parsed to get the contents of the corresponding field, which is quicker and faster than a string of strings returned by the HTML request.

Full instance

The code is as follows

Copy Code

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/> <link rel= "stylesheet" type= text/css "href=". /css/main.css "/> <style type= "Text/css" > . demo{width:400px margin:50px Auto} #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} </style> <script type= "Text/javascript" src= ". /js/jquery.js "></script> <script type= "Text/javascript" > $ (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); }); }); }); </script> <body> <div id= "Main" > <div class= "Demo" > <p> tips: Click on the name to see </p> <ul id= "UserList" > <li><a href= "#" rel= "1" > John </a></li> <li><a href= "#" rel= "2" > Dick </a></li> <li><a href= "#" rel= "3" > Harry </a></li> </ul> <div id= "Info" > <p> Name: <span id= "Name" ></span></p> <p> Sex: <span id= "Sex" ></span></p> <p> Tel: <span id= "Tel" ></span></p> <p> Email: <span id= "Email" ></span></p> </div> </div> </div> </body>