jquery returns JSON data via Ajax
When using jquery's AJAX approach, which requires the returned data to be JSON data, there are a couple of questions that are encountered in the process of generating JSON data in different ways, how it should be handled in the $.ajax method, and in turn.
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.
?
1 2 3 4 5 6 7 8 9 10 11 |
<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. It's important to note that I set the property "rel" for each label and assign it, which is very significant 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 appearance of the user list and user details, and you can also design a nice look for yourself. Before
jquery
Uses jquery, don't forget to make sure that the jquery library is loaded.
Next begins writing the jquery code.
?
1 2 3 4 5 6 7 8 9 |
$ (function () {$ ("#userlist a"). Bind ("click", Function () {var hol = $ (this). attr ("rel"); var data = "Action=getlink&i D= "+hol; $.getjson ("server.php", data, function (JSON) {$ ("#name"). HTML (json.name); $ ("#sex"). HTML (json.sex); $ ("#tel") . html (JSOn.tel); $ ("#email"). HTML (json.email); }); }); }); |
I give the user a list of each tags are bound to a click event, 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, The JSON request is then sent to the server server.php via Ajax, and after the background response, the JSON data is returned and the resulting data is displayed in the user's details.
Php
After the
Background server.php gets the AJAX request from the front end, it connects the database by passing parameters and queries the user table, converts the corresponding user information to 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.
?
1 2 3 4 5 6 7 8 9 |
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); The |
uses this article to know that jquery sends JSON requests via AJAX to the server, and it's easy to use 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 (1)1) NOT NULL auto_increment, ' username ' varchar (m) not null, ' sex ' varchar (6) is not NULL, ' tel ' varchar ' is not NULL, ' Emai L ' varchar not NULL, PRIMARY KEY (' id ')) engine=myisam DEFAULT Charset=utf8; |
The above is the entire contents of this article, I hope you can enjoy.