How to handle when JQuery ajax returns JSON

json data is a data storage method for real-time data interaction. The most commonly used method is the combination of ajax and json. Below, I will share with you the processing method of JQuery ajax returning JSON (three methods ), friends in need can refer to

Recently when using JQuery's ajax method, the data returned is required to be json data. During the processing process, I encountered the following problems, that is, using different methods When generating json data, how should it be processed in the $.ajax method? The following will explain it in turn. Since I use asp.net, the pages processed are all done in .net! The other methods should be the same.

1. Some basic knowledge of JSON.

Objects in JSON are identified by "{}". A "{}" represents an object, such as {"AreaId":"123"}, and the value of the object is in the form of a key-value pair ( key: value).

"[]" identifies the array, and the data inside the array are separated by ",", such as ["AreaId": "123", "AreaId": "345"].

In many cases it is an array of objects, that is:

[{“AreaId”:”123”},{“AreaId”:”345”}]

In fact, an array is also an object, and the above format can also be written like this:

{“Area”：[{“AreaId”:”123”},{“AreaId”:”345”}]}

This represents an Area object, which has two sub-data. Each sub-data is also an object, and each sub-object is an AreaId.

The definition format of strings and characters in JSON is similar to that of general C-like language definitions. Double quotes define strings and single quotes define characters.

JSON keys are enclosed in double quotes. For example, the "Area" and "AreaId" above are enclosed in double quotes. When constructing a JSON string in some languages, you can Use an escape character to escape double quotes.

First give the json data to be transmitted: [{"demoData":"This Is The JSON Data"}]​​​​​​​

1, use ordinary aspx page to process

I think this method is the easiest to process, look at the code below

$.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

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

This processing method will directly parse the passed data into json data , that is to say, the front-end js code here may directly parse these data into json object data instead of string data, such as data[0].demoData,

This json object data is directly used here​​​​

2. Using webservice (asmx) to handle this processing method will not treat the passed data as json object data, but as a string. The following code

$.ajax({   
type: "post",   
url: "JqueryCSMethodForm.asmx/GetDemoData",   
dataType: "json",/*这句可用可不用，没有影响*/ 
contentType: "application/json; charset=utf-8",   
success: function (data) {   
$("input#showTime").val(eval('(' + data.d + ')')[0].demoData); 
//这里有两种对数据的转换方式，两处理方式的效果一样//$("input#showTime").val(eval(data.d)[0].demoData); 
},   
error: function (XMLHttpRequest, textStatus, errorThrown) {   
alert(errorThrown);   
}   
});

The following is the asmx method code [WebMethod]

public static string GetDemoData() {   
return "[{\"demoData\":\"This Is The JSON Data\"}]";   
}

This processing method here treats the json data passed back as a string. This data must be eval processed so that it can become a real json object data.

3, using ashx files to process this method is the same as ordinary aspx page processing, so I won’t explain it here!

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to solve the Chinese garbled code submitted by JQuery ajaxSubmit

##What to do when JQuery ajax returns json with Chinese garbled code Solve

How to use the ajax post method in Django framework

##

The above is the detailed content of How to handle when JQuery ajax returns JSON. For more information, please follow other related articles on the PHP Chinese website!