Heim > Artikel > Web-Frontend > Beispiel für die Verwendung von getJSON() in jQuery+Ajax
Beispiel
Laden Sie JSON-Daten aus test.js und zeigen Sie Namensfelddaten in den JSON-Daten an:
$.getJSON("test.js", function(json){ alert("JSON Data: " + json.users[3].name); });
Definition und Verwendung
Laden Sie JSON-Daten über eine HTTP-GET-Anfrage.
In jQuery 1.2 können Sie JSON-Daten aus anderen Domänen laden, indem Sie eine Rückruffunktion im JSONP-Stil verwenden, z. B. „myurl?callback=?“. jQuery ersetzt ? automatisch durch den richtigen Funktionsnamen, um die Rückruffunktion auszuführen. Hinweis: Der Code nach dieser Zeile wird ausgeführt, bevor diese Rückruffunktion ausgeführt wird.
Syntax
jQuery.getJSON(url,[data],[callback])
Parameterbeschreibung
url Die URL-Adresse der Seite, die geladen werden soll.
Daten Schlüssel-/Wertparameter, die gesendet werden sollen.
Rückruf Die Rückruffunktion wird ausgeführt, wenn der Ladevorgang erfolgreich war.
Detaillierte Beschreibung
Diese Funktion ist eine abgekürzte Ajax-Funktion, äquivalent zu:
$.ajax({ url: url, data: data, success: callback, dataType: json });
Die an den Server gesendeten Daten können als Abfragezeichenfolge an die URL angehängt werden . Wenn der Wert des Datenparameters ein Objekt (Karte) ist, wird er in eine Zeichenfolge konvertiert und URL-codiert, bevor er an die URL angehängt wird.
Die an den Rückruf übergebenen Rückgabedaten können ein JavaScript-Objekt oder ein in einer JSON-Struktur definiertes Array sein und werden mit der Methode $.parseJSON() analysiert.
Weitere Beispiele
Beispiel 1
Laden Sie die 4 neuesten Katzenbilder von Flickr JSONP API:
HTML-Code:
<div id="images"></div>
jQuery-Code:
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne? tags=cat&tagmode=any&format=json&jsoncallback=?", function(data){ $.each(data.items, function(i,item){ $("<img/>").attr("src", item.media.m).appendTo("#images"); if ( i == 3 ) return false; }); });
Beispiel 2
JSON-Daten aus test.js laden, Parameter anhängen und Namensfelddaten in den JSON-Daten anzeigen:
$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){ alert("JSON Data: " + json.users[3].name); });
Weitere Informationen Artikel zu getJSON()-Verwendungsbeispielen in jQuery+Ajax, bitte beachten Sie die chinesische PHP-Website!