How jquery parses a JSON string (JSON-formatted/json object) _jquery

JSON data is one of our common small data real-time exchange of things, he can use jquery or JS to parse, I will introduce the jquery parsing JSON string method.

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 obtained in the example above is a nested JSON:

{"
  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 ...

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:

[
  {
    "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:

{"
  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.cnblogs.com/codeplus/"
  },
  "title": "123 wooden Man"
}

JS is as follows:

function Loadinfo () {
  $.getjson ("Loadinfo", function (data) {
    $ ("#title"). Append (data.title+ " 
 

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

The operation effect of the above example:

jquery is strong, so ... More understanding also have to refer to the document, (ˇˍˇ) think ~

The following are the other users to add:

jquery parses JSON data format:

Using this method, you must set the parameters in the AJAX request:
1 DataType: "JSON"
Get the data returned by the callback function and parse to get the value we want, see source code:

Jquery.ajax ({ 
url:full_url, 
dataType: "JSON", 
success:function (results) { 
alert (result.name); 

Typically, you can return JSON data from the background, and the front desk is given to jquery, haha!!
The jquery asynchronous request sets the type (typically this configuration property) to "JSON", or uses the $.getjson () method to get the server back, so it does not
The eval () method is needed because the result is already a JSON object, just call the object directly, and here the $.getjson method
Example says

Example 1
The code is as follows:

var data= ' 
{ 
root: 
[ 
{name: ' 1 ', Value: ' 0 '}, 
{name: ' 6101 ', Value: ' Beijing '}, 
{name: ' 6102 ', Value: ' Tianjin '}, 
{name: ' 6103 ', Value: ' Shanghai '}, 
{name: ' 6104 ', Value: ' Chongqing '}, 
{name: ' 6105 ', Value: ' Weinan '}, 
{name: ' 6106 ', Value: ' Yanan '}, 
{name: ' 6107 ', Value: ' Hanzhong '}, 
{name: ' 6108 ', Value: ' Yulin '}, 
{name: ' 6109 ', Value: ' Ankang '}, 
{name: ' 6110 ', Value: ' Shangluo '} 
] 

Jquery

$.getjson ("http://sanic.cnblogs.com/", {param: "sanic"},function (data) { 
//The data returned here is already a JSON object 
// The following other actions 
are the same as the first case $.each (Data.root,function (idx,item) { 
if (idx==0) {return 
true;//with Countinue, return false with Break 
} 
alert ("Name: +item.name+", Value: "+item.value);}"; 
}); 

jquery Parsing JSON objects:

jquery provides another way to "Parsejson", which requires a standard JSON string and returns the generated JavaScript object. Let's see
See Grammar:

Data = $.parsejson (string);
See how it is applied to the actual development:

Jquery.ajax ({ 
url:dataurl, success:function (results) { 
var Parsedjson = Jquery.parsejson (results); 
alert (parsedjson.name); 
}