jquery returns JSON data via Ajax

Source: Internet
Author: User
Tags json php server php and jquery library

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.



#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


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.


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.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.