Deep analysis of jquery parsing JSON data _jquery

Let's take a look at the JSON data of the comments object in the example, and then summarize the method of parsing the JSON data in jquery.

The JSON data is as follows, and is a nested JSON:

Copy Code code as follows:

{"Comments": [{"Content": "Very good", "id": 1, "nickname": "Nani"},{"content": "Yo West yo West", "id": 2, "nickname": "Xiao Qiang"}]}

To get the JSON data, there is a simple method $.getjson () that can be implemented in jquery.

The following is a description of the official API for $.getjson ():

Jquery.getjson (URL, [data,] [Success (data, Textstatus, JQXHR)]

Urla string containing the URL to which the request is sent.

Dataa map or string is sent to the server with the request.

Success (data, Textstatus, JQXHR) A callback function This is executed if the request succeeds.

Three parameters are accepted in the callback function, the first book returns the data, the second is the state, and the third is the XMLHttpRequest of jquery, we only use the first parameter.

$.each () is the method used to parse JSON data in a callback function, the following is an official document:

Jquery.each (collection, Callback (Indexinarray, valueofelement))

Collectionthe object or array to iterate over.

Callback (Indexinarray, valueofelement) The function that is executed on every object.

The $.each () method accepts two parameters, the first is the set of objects to traverse (the set of JSON objects), the second is the method used to traverse, and the method accepts two parameters, the first is the index of traversal, and the second is the value of the current traversal. Haha, with the $.each () method JSON parsing will be solved. (*^__^*) Xi hee ...

Copy Code code as follows:

function Loadinfo () {
$.getjson ("Loadinfo", function (data) {
$ ("#info"). HTML ("");//empty Info content $.each (data.comments, function (I, item) {
$ ("#info"). Append (
"<div>" + item.id + "</div>" +
"<div>" + item.nickname + "</div>" + "<div>" + item.content + "</div>});
});
}

As above, Loadinfo is the address of the request, function (data) {...} The callback function after the successful request, data encapsulates the returned JSON object, in the following $.each (Data.comments,function (I,item) {...}) Method Data.comments directly to the JSON array contained in the JSON data:

Copy Code code as follows:

[{"Content": "Very good", "id": 1, "nickname": "Nani"},{"content": "Yo West yo West", "id": 2, "nickname": "Xiao Qiang"}]

The function in the $.each () method is to iterate over the array, and then insert it into the appropriate place by manipulating the DOM. In the process of traversal, we can easily access the current traversal index ("I" in the code) and the current traversal value ("Item" in the code).

The results of the above example run as follows:

If the returned JSON data is more complex, you need more $.each () to traverse it, hehe. For example, the following JSON data:

Copy Code code as follows:

{"Comments": [{"Content": "Very good", "id": 1, "nickname": "Nani"},{"content": "Yo West yo West", "id": 2, "nickname": "Xiao Qiang"}],
"Content": "You are wood people, haha." "," Infomap ": {" gender ":" Male "," occupation ":" Programmer ",
"Blog": "http:\/\/www.xxx.com\/codeplus\/"}, "title": "123 Wooden Man"}

JS is as follows:

Copy Code code as follows:

function Loadinfo () {
$.getjson ("Loadinfo", function (data) {
$ ("#title"). Append (data.title+ "$ ("#content"). Append (data.content+ "jquery Parsing map data
$.each (Data.infomap,function (key,value) {
$ ("#mapinfo"). Append (key+ "----" +value+ "<br/>});
Parsing arrays
$.each (data.comments, function (I, item) {
$ ("#info"). Append (
"<div>" + item.id + "</div>" +
"<div>" + item.nickname + "</div>" +
"<div>" + item.content + "</div>});
});
}

It is noteworthy that when $.each () is traversing the map, the parameters in function () are key and value, which is very convenient.