Analyse approfondie de l'analyse jquery json data_jquery

Prenons d'abord comme exemple les données JSON analysant l'objet commentaires dans l'exemple ci-dessus, puis résumons la méthode d'analyse des données JSON dans jQuery.

Les données JSON sont les suivantes, qui sont un JSON imbriqué :

Copier le code Le code est le suivant :

{"comments":[{"content":"Très bien","id":1,"nickname":"Nani"},{"content":"Yoshiyoshi","id":2 ,"nickname": "Xiaoqiang"}]}

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

Ce qui suit est la description officielle de l'API de $.getJSON() :

jQuery.getJSON( url, [data,] [success(data, textStatus, jqXHR)] )

urlUne chaîne contenant l'URL à laquelle la requête est envoyée.

donnéesUne carte ou une chaîne envoyée au serveur avec la requête.

success(data, textStatus, jqXHR)Une fonction de rappel qui est exécutée si la requête réussit.

La fonction de rappel accepte trois paramètres. Le premier est les données renvoyées, le deuxième est le statut et le troisième est XMLHttpRequest de jQuery. Nous utilisons uniquement 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) )

collectionL'objet ou le tableau sur lequel effectuer une itération.

callback(indexInArray, valueOfElement)La fonction qui sera exécutée sur chaque objet.

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

Copier le code Le code est le suivant :

fonction loadInfo() {
$.getJSON("loadInfo", fonction(données) {
                                                                                                                                                                                                                                                                    $                 $("#info").append(
"

" item.id "

" "

" item.nickname "

" "

" item.content "

---

");
        });
        });
>

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.comments,function suivant Le data.comments de la méthode (i,item){...}) atteint directement le tableau JSON contenu dans les données JSON :

Copier le code Le code est le suivant :

[{"content":"Très bien","id":1,"nickname":"Nani"},{"content":"Yoshiyoshi","id":2,"nickname": "Xiaoqiang"}]

La fonction de la méthode $.each() est de parcourir ce tableau puis de l'insérer à l'endroit approprié en exploitant 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 more $.each() pour les parcourir, hehe. Par exemple, les données JSON suivantes :

Copier le code Le code est le suivant :

{"comments":[{"content":"Très bien","id":1,"nickname":"Nani"},{"content":"Yoshiyoshi","id":2 ,"nickname": "Xiaoqiang"}],

"content": "Tu es stupide, haha.", "infomap": {"Gender": "Homme", "Occupation": "Programmeur",
"Blog": "http://www.xxx.com/codeplus/"}, "title": "123 L'homme de bois">

js est le suivant :

Copier le code Le code est le suivant :

function loadInfo() {
    $.getJSON("loadInfo", function(data) {
        $("#title").append(data.title "

---

");
        $("#content").append(data.content "

---

");
        //jquery解析map資料
        $.each(data.infomap,function(key,value){
            $("#mapinfo").append(key "----" value "

---

");
        });
        //解析數組
        $.each(data.comments, function(i, item) {
            $("#info").append(
                    "

" item.id "

"
                    "

" item.nickname    "

"
                    "

" item.content "

---

");
        });
        });
}

值得注意的是，$.each()遍歷Map的時候，function()中的參數是key和value，十分方便。