Example tutorial on parsing JSON data with jQuery

In the preliminary analysis of the Ajax development example in Struts2 in the previous article, we obtained the JSON data of the comments object. In this article, we will use jquery for data analysis.

Let’s first take the JSON data parsing the comments object in the above example as an example, and then summarize the method of parsing JSON data in jQuery.

The JSON data obtained in the above example is as follows, which is a nested JSON:

{“comments”:[{“content”:”很不错嘛”,”id”:1,”nickname”:”纳尼”},{“content”:”哟西哟西”,”id”:2,”nickname”:”小强”}]}

To obtain JSON data, there is a simple method $.getJSON() in jQuery to achieve this.

The following quote is the official API description of $.getJSON():

jQuery.getJSON( url, [data,] [success(data, textStatus, jqXHR)] )
urlA string containing the URL to which the request is sent.
dataA map or string that is sent to the server with the request.
success(data, textStatus, jqXHR)A callback function that is executed if the request succeeds.

The callback function accepts three parameters , the first is the data returned by the book, the second is status, and the third is jQuery's XMLHttpRequest. We only use the first parameter.

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

jQuery.each( collection, callback(indexInArray, valueOfElement) )
collectionThe object or array to iterate over.
callback(indexInArray, valueOfElement)The function that will be executed on every object.

$.each() method accepts two parameters, the first It is the object collection that needs to be traversed (JSON object collection), and the second is the method used to traverse. This method accepts two parameters, the first is the traversed index, and the second is the current traversed value. Haha, with the $.each() method, JSON parsing is easily solved.

function loadInfo() {
$.getJSON(“loadInfo”, function(data) {
$(“#info”).html(“”);//清空info内容
$.each(data.comments, function(i, item) {
$(“#info”).append(
“<p>” + item.id + “</p>” +
“<p>” + item.nickname    + “</p>” +
“<p>” + item.content + “</p><hr/>”);
});
});
}

As above, loadinfo is the requested address, function(data){...} is the callback function after the request is successful, data encapsulates the returned JSON object, in the following $.each(data.comments , the data.comments in the function(i,item){…}) method directly reaches the JSONarray contained in the JSON data: The function in the

[{“content”:”很不错嘛”,”id”:1,”nickname”:”纳尼”},{“content”:”哟西哟西”,”id”:2,”nickname”:”小强”}]

$.each() method is the This array is traversed and inserted into the appropriate place by manipulating the DOM. During the traversal process, we can easily access the current traversal index ("i" in the code) and the current traversal value ("item" in the code).

The running results of the above example are as follows:

If the returned JSON data is more complex, just use more $.each() Just traverse, hehe. For example, the following JSON data:

{“comments”:[{“content”:”很不错嘛”,”id”:1,”nickname”:”纳尼”},{“content”:”哟西哟西”,”id”:2,”nickname”:”小强”}],
“content”:”你是木头人，哈哈。”,”infomap”:{“性别”:”男”,”职业”:”程序员”,”博客”:”http:////www.cnblogs.com//codeplus//”},”title”:”123木头人”}
JS如下：
function loadInfo() {$.getJSON(“loadInfo”, function(data) {
$(“#title”).append(data.title+”<hr/>”);$(“#content”).append(data.content+”<hr/>”);//jquery解析map数据$.each(data.infomap,function(key,value){$(“#mapinfo”).append(key+”—-”+value+”<br/><hr/>”);});//解析数组$.each(data.comments, function(i, item) {$(“#info”).append(“<p>” + item.id + “</p>” +“<p>” + item.nickname    + “</p>” +“<p>” + item.content + “</p><hr/>”);});});}

It is worth noting that when $.each() traverses the Map, the parameters in function() are key and value, which is very convenient.

The above is the detailed content of Example tutorial on parsing JSON data with jQuery. For more information, please follow other related articles on the PHP Chinese website!