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.
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. Readers of this article should have jquery, Ajax, PHP-related knowledge, and skilled use.
Xhtml
<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.
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 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.
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 ')
Well, that's all for the end of this article, and for more information about jquery Ajax JSON, please log in to the Cloud Communities (www.jb51.net) website for more information.