How jQueryAjax processes Json data asynchronously _ jquery

Jqueryajax does not significantly change the processing of json data with other ajax data. We only need to simply process the data type of the ajax ype In the ajax section as json. Let's look at an official example.
Use AJAX requests to obtain JSON data and output the results:

The Code is as follows:

$ ("Button"). click (function (){
$. GetJSON ("demo_ajax_json.js? 6.1.3 ", function (result ){
$. Each (result, function (I, field ){
$ ("P"). append (field + "");
});
});
});

This function is short for Ajax functions and is equivalent:

The Code is as follows:

$. Ajax ({
Url: url,
Data: data,
Success: callback,
DataType: json
});

The data sent to the server can be appended to the URL as a query string. If the value of the data parameter is an object (ing), it is converted to a string and URL encoded before being appended to the URL.
The returned 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 in JSON data:

The Code is as follows:

$. GetJSON ("test. js? 6.1.3 ", function (json ){
Alert ("JSON Data:" + json. users [3]. name );
});

One instance with asp.net
First, provide The json Data to be transmitted: [{"demoData": "This Is The JSON Data"}]
1. Use a normal aspx page for processing
I think this method is the easiest to handle. Let's look at the following code.

The Code is as follows:

$. Ajax ({
Type: "post ",
Url: "Default. aspx ",
DataType: "json ",
Success: function (data ){
$ ("Input # showTime"). val (data [0]. demoData );
},
Error: function (XMLHttpRequest, textStatus, errorThrown ){
Alert (errorThrown );
}
});

Here is the code for passing data in the background

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 transmitted data into json data. That is to say, the front-end js code here may directly parse the data into json object data instead of string data, for example, data [0]. demoData: The json object data is directly used here.
2. Use webservice (asmx) for processing
This method does not treat the transmitted data as json object data, but as a string for processing. The following code:

The Code is as follows:

$. Ajax ({
Type: "post ",
Url: "JqueryCSMethodForm. asmx/GetDemoData ",
DataType: "json",/* This sentence can be used but not affected */
ContentType: "application/json; charset = UTF-8 ",
Success: function (data ){
$ ("Input # showTime"). val (eval ('+ data. d +') [0]. demoData );
// There are two data conversion methods. The two processing methods have the same effect. // $ ("input # showTime "). val (eval (data. d) [0]. demoData );
},
Error: function (XMLHttpRequest, textStatus, errorThrown ){
Alert (errorThrown );
}
});

The following is the asmx method code.

The Code is as follows:

[WebMethod]
Public static string GetDemoData (){
Return "[{" demoData ":" This Is The JSON Data "}]";
}

The processing method here treats the transmitted json data as a string, and the data must be processed eval so that it can become a real json object data,
Let's take a look at the html template:

The Code is as follows:

Order ID	Customer ID	Employee ID	Order Date	Date of shipment	Owner name	Cargo owner address	Cargo owner City	More information

All the id attributes are important. Let's take a look at the AJAX request and data binding code.

The Code is as follows:

$. Ajax ({
Type: "get", // use the get method to access the background
DataType: "json", // return data in json format
Url: "BackHandler. ashx", // background address to be accessed
Data: "pageIndex =" + pageIndex, // data to be sent
Complete: function () {$ ("# load"). hide () ;}, // hide the loading prompt when the AJAX request is complete
Success: function (msg) {// msg is the returned data. Bind The data here.
Var data = msg. table;
$. Each (data, function (I, n ){
Var row = $ ("# template"). clone ();
Row. find ("# OrderID"). text (n. Order ID );
Row. find ("# CustomerID"). text (n. Customer ID );
Row. find ("# EmployeeID"). text (n. employee ID );
Row. find ("# OrderDate"). text (ChangeDate (n. Order Date ));
If (n. date of shipment! = Undefined) row. find ("# ShippedDate"). text (ChangeDate (n. date of shipment ));
Row. find ("# ShippedName"). text (n. goods owner name );
Row. find ("# ShippedAddress"). text (n. Cargo Master Address );
Row. find ("# ShippedCity"). text (n. Main City );
Row. find ("# more" rows .html ("More ");
Row. attr ("id", "ready"); // change the id of the row bound to the data.
Row. appendTo ("# datas"); // Add it to the template container
});

This is jQuery's AJAX method, and the returned data is not complex. It mainly describes how to display the data to the page according to the template definition. The first is the "var row = $ (" # template "). clone (); "first copy the template, and then row. find ("# OrderID "). text (n. order ID);, indicating to find the tag id = OrderID, set its innerText as the corresponding data, of course, you can also set it to html format data. Or use external functions to convert the data into the required format, for example, row. find ("# OrderDate "). text (ChangeDate (n. order Date); a bit of server controls do the feeling of template binding data.
All of these are put in a static page, and only the AJAX method is used to obtain data from the background. All the html code is as follows:

The Code is as follows:

Test1