Exemple de tutoriel sur l'analyse des données JSON avec jQuery

Dans l'analyse préliminaire de l'exemple de développement Ajax dans Struts2 dans l'article précédent, nous avons obtenu les données JSON de l'objet commentaires. Dans cet article, nous utiliserons jquery pour l'analyse des données.

Analysons d'abord les données JSON de l'objet commentaires dans l'exemple ci-dessus à titre d'exemple, puis résumons la méthode d'analyse des données JSON dans jQuery.

Les données JSON obtenues dans l'exemple ci-dessus sont les suivantes, qui sont un JSON imbriqué :

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

Pour obtenir des données JSON, il existe une méthode simple $.getJSON() dans jQuery pour y parvenir.

Ce qui suit cité est la description officielle de l'API de $.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.

La fonction de rappel accepte trois Paramètres, le premier est les données renvoyées par le livre, le second est le statut et le troisième est le XMLHttpRequest de jQuery. Nous n'utilisons que le premier paramètre.

$.each() est une méthode utilisée pour analyser les données JSON dans la fonction de rappel. Voici le document officiel :

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.

La méthode $.each() accepte deux paramètres. . L'un est la collection d'objets qui doit être parcourue (collection d'objets JSON) et la seconde est la méthode utilisée pour parcourir. Cette méthode accepte deux paramètres, le premier est l'index parcouru et le second est la valeur actuellement parcourue. Haha, avec la méthode $.each(), l'analyse JSON est facilement résolue.

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/>”);
});
});
}

Comme ci-dessus, loadinfo est l'adresse demandée, function(data){…} est la fonction de rappel une fois la requête réussie, data encapsule l'objet JSON renvoyé, dans le $.each(data suivant .comments, function(i,item){…}), data.comments atteint directement le JSONarray contenu dans les données JSON :

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

$.each() méthode La fonction est de parcourir ce tableau puis de l'insérer à l'endroit approprié en manipulant le DOM. Pendant le processus de parcours, nous pouvons facilement accéder à l'index de parcours actuel ("i" dans le code) et à la valeur de parcours actuelle ("élément" dans le code).

Les résultats de l'exemple ci-dessus sont les suivants :

Si les données JSON renvoyées sont plus complexes, utilisez simplement plus de $.each( ) Traversez simplement, hehe. Par exemple, les données JSON suivantes :

{“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/>”);});});}

Il convient de noter que lorsque $.each() parcourt la carte, les paramètres dans function() sont la clé et la valeur, ce qui est très pratique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!