Detailed explanation of jQuery Ajax asynchronous processing of Json data

First let’s look at an official example
Use AJAX request to obtain JSON data and output the result:

Copy code Code As follows:

$("button").click(function(){
 $.getJSON("demo_ajax_json.js",function(result){
 $.each(result , function(i, field){
                                                                                                                                                                                       🎜>This function is an abbreviated Ajax function, equivalent to: 

Copy code

The code is as follows:$.ajax({ url: url, data: data, success: callback,

dataType: json

});

 
Send Data to the server can be appended to the URL as a query string. If the value of the data parameter is an object (map), it is converted to a string and URL-encoded before being appended to the URL. 
The return data passed to callback can be a JavaScript object or an array defined in a JSON structure, and is parsed using the $.parseJSON() method. 
Load JSON data from test.js and display a name field data in the JSON data: 

Copy the code

The code is as follows: $.getJSON("test.js", function(json){ alert("JSON Data: " json.users[3].name);});

An asp.net instance 
First give the json data to be transferred: [{"demoData":"This Is The JSON Data"}]
1, use ordinary aspx page
I think this method is the easiest to handle, look at the code below

Copy code

The code is as follows:$.ajax({ url: "Default.aspx", dataType: "json", success: function (data) {

error: function (XMLHttpRequest, textStatus, errorThrown) {
});

Here is the code for transmitting data in the background

Copy the code The code is as follows:

Response. Clear(); 
Response.Write("[{"demoData":"This Is The JSON Data"}]"); 
Response.Flush(); 
Response.End(); 

This processing method directly parses the passed data into json data, which means that the front-end js code here may directly parse the data into json object data instead of string data, such as data [0].demoData, this json object data is used directly here
2, and webservice (asmx) is used to process
This processing method will not treat the passed data as json object data, but Processed as a string, the following code

Copy the code The code is as follows:

$.ajax ({ 
type: "post", 
url: "JqueryCSMethodForm.asmx/GetDemoData", 
dataType: "json",/*This sentence can be used or not, it has no impact*/
contentType: "application/json; charset=utf-8", 
success: function (data) { 
$("input#showTime").val(eval('(' data.d ')')[0 ].demoData);
//There are two ways to convert data. The two processing methods have the same effect//$("input#showTime").val(eval(data.d)[0].demoData );
}, 
error: function (XMLHttpRequest, textStatus, errorThrown) { 
alert(errorThrown); Copy the code for the asmx method code 

The code is as follows: [WebMethod] public static string GetDemoData() { return "[{"demoData":"This Is The JSON Data"}]";

}

 
This processing method here just passes The returned json data is processed as a string. This data needs to be eval processed so that it can become a real json object data. 
 Let’s take a look at the html template first:

Copy code

The code is as follows: