JQuery processes json and ajax and returns JSON example code_jquery

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:

Copy code The code is as follows:

[{"AreaId":"123"},{ "AreaId":"345"}]

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

Copy code The code is as follows:

{"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 escape Character escape double quotes.

2. JavaScript operation of JSON characters

1. First, distinguish between JSON strings and JSON objects

JSON string:

Copy code The code is as follows:

Var strJSON = "{"Area":[{" AreaId":"123"},{"AreaId":"345"}]}",

In fact, it can also be written like this:

Copy code The code is as follows:

Var strJSON = '{"Area":[{" AreaId":"123"},{"AreaId":"345"}]}',

This represents a JSON string. Since both single quotes and double quotes can represent a string in JS, the first one using double quotes and the second one using single quotes above represent a JSON string.

Look at the JSON object below

Copy code The code is as follows:

Var JSON = {"Area": ​​[{"AreaId ":"123"},{"AreaId":"345"}]},

As you can see, there are no single or double quotes on the outside of the JSON object, which means it is a JSON object.

Script that broke on the server:

Copy code The code is as follows:

$data['id '] = 1;
$dat['name'] = "mary";
$da['red']= array_merge($data,$dat);
$data1['id'] = 2;
$dat1['name'] = "Yanzi";
$da['blue']= array_merge($data1,$dat1);
print_r($da);/// It prints out a two-dimensional array (as shown below)

/*
Array
(
[red] => Array
(
[id] => 1
[name] => mary
) [Blue] = & gt; Array
(
[ID] = & gt; 2
[name] = & gt; Swallow
)

*/

echo json_encode($da);//The output is a string converted into json format, which can be used directly in js (as follows)

/*
{"red":{"id" :1,"name":"mary"},"blue":{"id":2,"name":"u71d5u5b50"}}
*/
?>

jquery script:

Processing after returning to js:

The first one needs to use varl conversion: when it is a string, use eval to convert it into a jquery object (as follows)

Copy code The code is as follows:

var arr = '{"red":{"id":1,"name":"mary"},"blue":{"id":2,"name":"u71d5u5b50"} }';//u71d5u5b50 This is automatically converted in php
var dataObj = eval("(" arr ")");//I don’t know the reason why brackets and double quotes are added here, just When it comes to json syntax, you can only memorize it by rote
$.each(dataObj,function(idx,item){
//Output
alert(item.id "Haha" item.name);
})

The second type: does not require conversion:

Copy code The code is as follows:

var arr = {"red":{"id" :1,"name":"mary"},"blue":{"id":2,"name":"u71d5u5b50"}};
$.each(arr,function(idx,item){ 
//Output
alert(item.id "Haha" item.name);
})

There are also two methods for looping:
//Method 1:

Copy code The code is as follows:

$.each(arr,function(idx,item) { 
 //Output
 alert(item.id "Haha" item.name);
})

//Method 2:

Copy code The code is as follows:

for(var key in arr){
alert (key);
alert(arr[key].status);
}

You can try the effect.

How to handle when ajax returns JSON

1. Use an ordinary aspx page to process
I think this method is the easiest to process, look at the code below

Copy code The code is as follows:

$.ajax({
                                                                         ",
                                                                                                                                                          Success: function (data) {
                                                     .demoData); {
                                                                                                      ​                                                            });

Here is the code for transmitting data in the background

Copy code The code is as follows:

Response.Clear();
Response.Write ("[{"demoData":"This Is The JSON Data"}]");
                            Response.Flush();
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