Let's look at the demo code first.
| The code is as follows |
Copy Code |
| <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"
"http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd ""
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>ajax json test</title> <script language=" JavaScript "src="./ Jquery-1.7.1.min.js "/></script>
<script language=" JavaScript "src="./ajax_json.js "/></" Script> <body style= "font-family:arial;line-height:150%"
<a Href= "Javascript:getallusers ();" > Get all user information </a>
&NBSP
<!--for displaying return results;
<div id= "users" ></div>
</body>
& Lt;/html> |
When we click to get all the user information displayed in the DIV id=users
the JSON string returned by Ajax:
[{"UserId": 1, "UserName": "Raysmond"},{"UserId": 2, "UserName": "u96f7u5efau5764"},{"UserId": 3, "UserName": " Rita "}]
The analytic result is:
UserId = 1
UserName = Raysmond
UserId = 2
UserName = Lei Jiangun
UserId = 3
UserName = Rita
The above code you may not understand, we are now to detail
Code section
| The code is as follows |
Copy Code |
| Index.html <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>ajax JSON test</title> <script language= "javascript" src= "./jquery-1.7.1.min.js"/></script>
<script language= "javascript" src= "./ajax_json.js"/></script> <body style= "font-family:arial;line-height:150%" >
<a href= "javascript:getallusers ();" > Get all user information </a> <br/>
<!--to display return results-->
<div id= "Users" ></div>
</body>
/**
* jQuery synchronization ajax Encapsulation
*/
function Getjson (requestdata,url) {
var Rejson;
$.ajax ({
type: ' POST ',
url:url,
data:requestdata,
Async:false,//For simplicity, set to sync Operation
cache:false,
success:function (responsedata) {
reJson=responseData;
}
});
return rejson;
} /**
* Get all user information
*/
Function getallusers () {
var url = "./service.php";
var R Equest = ' action=get_all_users ';
//gets and resolves from the background, because the above encapsulation Ajax uses synchronous return,
//so that the operation succeeds in obtaining the return Data
var JSON = Getjson (Request,url);
var users = eval (' + json + ');
var usershtml = ' <br/><span style= ' color:red; >ajax returns the JSON string:</span><br/> '
+ json + ' <br/><br/><span Style= "color:red;" The result of > analysis is:</span><br/> ';
for (var i=0;i<users.length;++i) {
usershtml + = ' UserId = ' + Users[i].userid + ' <br/> '
+ ' userName = ' + users[i].username + ' <br/> ';
}
//dynamically displays the constructed HTML to the page
$ (' #users ') using jquery. Empty (). HTML (usershtml);
service.php <?php
Accept request parameters and select actions based on parameters
if (Isset ($_post[' action ')) &&$_post[' action ']!= "") {
Switch ($_post[' action ']) {
Case ' get_all_users ': getallusers (); Break
Default
}
} Processing request: Returns all user information in JSON format
function GetAllUsers () {
$users = Array (
Array ("UserId" =>1, "UserName" => "Raysmond"),
Array ("UserId" =>2, "UserName" => "Lei Jiangun"),
Array ("UserId" =>3, "UserName" => "Rita")
);
echo Json_encode ($users);
}
?> |
