JQuery Ajax + PHP return JSON data example tutorial

There are many ajax data return modes: Common html code, xml document, and json data for real-time interaction, next I will introduce you to a jQuery Ajax + PHP return JSON data instance for your reference.

JSON (JavaScript Object Notation) is a lightweight data exchange format. Easy for reading and writing, and easy for machine parsing and generation. JSON plays an outstanding role in the interaction between the frontend and backend. Next, let's take a look at the tutorial.

Mysql table structure

The Code is as follows:	Copy code
Create table if not exists 'user '( 'Id' int (11) not null auto_increment, 'Username' varchar (100) not null, 'Sex 'varchar (6) not null, 'Tel 'varchar (50) not null, 'Email 'varchar (64) not null, Primary key ('id ') ) ENGINE = MyISAM default charset = utf8;

XHTML

The Code is as follows:	Copy code
<Ul id = "userlist"> <Li> <a href = "#" rel = "1"> JOHN </a> </li> <Li> <a href = "#" rel = "2"> li Si </a> </li> <Li> <a href = "#" rel = "3"> Wang Wu </a> </li> </Ul> <Div id = "info"> <P> name: <span id = "name"> </span> </p> <P> Gender: <span id = "sex"> </span> </p> <P> tel: <span id = "tel"> </span> </p> <P> email: <span id = "email"> </span> </p> </Div>

The instance displays a user name list ul # userlist and a user details layer # info. It is worth noting that I set the attribute "rel" for each <a> label and assign values. This is very important and will be used in jQuery. The effect I want to achieve is that when I click the name of any user in the user list, the details of the user, such as phone number and EMAIL, will be displayed instantly.

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 display appearance of the user list and user details. You can also design a nice appearance by yourself.

JQuery

Before using jQuery, do not forget to ensure that the jQuery library is loaded.

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

Next we will start writing 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" 2.16.html (json. sex ); $ ("# Tel" pai.html (json. tel ); $ ("# Email" ).html (json. email ); }); }); });

Each <a> tag in the user list is bound with a click event. When you click a user name, perform the following operations: Get the attribute "rel" value of the current tag, and form a data string: var data = "action = getlink & id =" + hol, and then send it to the server through ajax. php sends a JSON request. After receiving a background response, it returns JSON data and displays the data in the user details.

PHP

Backend server. after obtaining the front-end Ajax request, php connects to the database through the passed parameters and queries the user table, converts the corresponding user information into an array $ list, and finally converts the array to JSON data. For PHP and JSON operations, you can view the articles collected on this site: JSON applications in PHP. The following is the detailed code of server. php, in which the data connection is omitted. Please establish your own data connection.

The Code is as follows:	Copy code
Include_once ("connect. php"); // connect to the 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 ); }

This article shows how to use $. getJSON to send a JSON request to the server through Ajax. In addition, the data returned by the server can be parsed to obtain the content of the corresponding field, which is convenient and convenient compared with a large string returned by the HTML request.

Complete 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" 2.16.html (json. sex ); $ ("# Tel" pai.html (json. tel ); $ ("# Email" ).html (json. email ); }); }); }); </Script> </Head> <Body> <Div id = "main"> <Div class = "demo"> <P> tip: click "name". </p> <Ul id = "userlist"> <Li> <a href = "#" rel = "1"> JOHN </a> </li> <Li> <a href = "#" rel = "2"> li Si </a> </li> <Li> <a href = "#" rel = "3"> Wang Wu </a> </li> </Ul> <Div id = "info"> <P> name: <span id = "name"> </span> </p> <P> Gender: <span id = "sex"> </span> </p> <P> tel: <span id = "tel"> </span> </p> <P> email: <span id = "email"> </span> </p> </Div> </Div> </Div> </Body> </Html>