Eingehende Analyse der jquery-Analyse von json data_jquery

Nehmen wir zunächst die JSON-Daten, die das Kommentarobjekt im obigen Beispiel analysieren, als Beispiel und fassen dann die Methode zum Parsen von JSON-Daten in jQuery zusammen.

Die JSON-Daten lauten wie folgt, es handelt sich um ein verschachteltes JSON:

Code kopieren Der Code lautet wie folgt:

{"comments":[{"content="Sehr gut",id":1,"nickname":Nani"},{"content":Yoshiyoshi","id":2 ,"nickname": „Xiaoqiang“}]}

Um JSON-Daten abzurufen, gibt es in jQuery eine einfache Methode $.getJSON().

Das Folgende ist die offizielle API-Beschreibung von $.getJSON():

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

URLEine Zeichenfolge, die die URL enthält, an die die Anfrage gesendet wird.

DatenEine Karte oder Zeichenfolge, die mit der Anfrage an den Server gesendet wird.

success(data, textStatus, jqXHR)Eine Rückruffunktion, die ausgeführt wird, wenn die Anfrage erfolgreich ist.

Die Rückruffunktion akzeptiert drei Parameter. Der erste sind die zurückgegebenen Daten, der zweite ist der Status und der dritte ist jQuerys XMLHttpRequest. Wir verwenden nur den ersten Parameter.

$.each() ist eine Methode zum Parsen von JSON-Daten in der Rückruffunktion. Das Folgende ist das offizielle Dokument:

jQuery.each( Sammlung, Rückruf(indexInArray, valueOfElement) )

SammlungDas Objekt oder Array, über das iteriert werden soll.

callback(indexInArray, valueOfElement)Die Funktion, die für jedes Objekt ausgeführt wird.

Die Methode $.each() akzeptiert zwei Parameter. Der erste ist die zu durchlaufende Objektsammlung (JSON-Objektsammlung). Der durchquerte Index und der zweite ist der aktuell durchquerte Wert. Haha, mit der Methode $.each() lässt sich das JSON-Parsing leicht lösen. (*^__^*) Hihi...

Code kopieren Der Code lautet wie folgt:

Funktion loadInfo() {
$.getJSON("loadInfo", function(data) {
                                                                                                                                                                                                                                                              $                 $("#info").append(
„

“ item.id „

“ „

“ item.nickname „

“ item.content „

---

“);
});
});
}

Wie oben ist „loadinfo“ die angeforderte Adresse, „function(data){...}“ ist die Rückruffunktion nach erfolgreicher Anforderung und „data“ kapselt das zurückgegebene JSON-Objekt im folgenden $.each(data.comments,function Die data.comments in der Methode (i,item){...}) erreichen direkt das in den JSON-Daten enthaltene JSON-Array:

Code kopieren Der Code lautet wie folgt:

[{"content": "Sehr gut", "id":1,"nickname": "Nani"}, {"content": "Yoshiyoshi", "id":2,"nickname": "Xiaoqiang"}]

Die Funktion in der Methode $.each() besteht darin, dieses Array zu durchlaufen und es dann durch Betreiben des DOM an der entsprechenden Stelle einzufügen. Während des Durchlaufvorgangs können wir problemlos auf den aktuellen Durchlaufindex („i“ im Code) und den aktuellen Durchlaufwert („item“ im Code) zugreifen.

Die Ergebnisse des obigen Beispiels sind wie folgt:

Wenn die zurückgegebenen JSON-Daten komplexer sind, verwenden Sie einfach mehr $.each(), um sie zu durchlaufen, hehe. Zum Beispiel die folgenden JSON-Daten:

Code kopieren Der Code lautet wie folgt:

{"comments":[{"content="Sehr gut",id":1,"nickname":Nani"},{"content":Yoshiyoshi","id":2 ,"nickname": „Xiaoqiang“}],

„content“: „Du bist dumm, haha.“, „infomap“:{“Geschlecht“: „Männlich“, „Beruf“: „Programmierer“,
„Blog“: „http://www.xxx.com/codeplus/“}, „title“: „123 Wooden Man“}

js lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

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

---

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

---

");
//jquery analyse les données cartographiques
          $.each(data.infomap,function(key,value){
$("#mapinfo").append(clé "----" valeur "

---

");
        });
//Analyser le tableau
          $.each(data.comments, function(i, item) {
                $("#info").append(
"

" item.id "

" "

" élément.surnom "

" "

" item.content "

---

");
        });
        });
>

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