jquery returns JSON data via Ajax _jquery

Server-side PHP reads MySQL data, converts it to JSON data, passes it to front-end JavaScript, and operates JSON data. This article demonstrates how jquery sends requests via AJAX to the PHP server and returns JSON data.

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.

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

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

#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.
<script type= "Text/javascript" src= ". /js/jquery.js "></script>
Next you 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 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 site collection of articles:. The following is the detailed code of the server.php, where the data connection is omitted, please set up your own data connection.

Include_once ("connect.php"); Connect 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.
Finally attach the MySQL table structure

CREATE TABLE IF not EXISTS ' user ' ( 
 ' id ' int (one) not NULL auto_increment, 
 ' username ' varchar (m) Not null,
   
     ' sex ' varchar (6) NOT NULL, 
 ' tel ' varchar (+) NOT NULL, 
 ' email ' varchar (+) NOT NULL, 
 PRIMARY KEY (' id ') 

   

The above mentioned is the entire content of this article, I hope you can enjoy.