jQuery ajax - getJSON() Methode
Beispiel
Verwenden Sie AJAX-Anfragen, um JSON-Daten zu erhalten und die Ergebnisse auszugeben:
$("button").click(function(){ $.getJSON("demo_ajax_json.js",function(result){ $.each(result, function(i, field){ $("div").append(field + " "); ); ); );
Definition und Verwendung
Laden Sie JSON-Daten über eine HTTP GET-Anfrage.
In jQuery 1.2 können Sie JSON-Daten von anderen Domains in JSONP-Form mit Callback-Funktionen laden, z.B. "myurl?callback=?". jQuery ersetzt automatisch ? durch den richtigen Funktionsnamen, um die Callback-Funktion auszuführen. Beachten Sie: Der folgende Code wird vor der Ausführung der Callback-Funktion ausgeführt.
Syntax
jQuery.getJSON(url,data,success(data,status,xhr)})
Parameter | Beschreibung |
---|---|
url | Notwendig. Definiert, welche URL die Anfrage gesendet wird. |
data | Wahrscheinlich. Definiert die Daten, die zusammen mit der Anfrage an den Server gesendet werden. |
success(data,status,xhr)} |
Optional. Definiert eine Funktion, die beim Erfolg der Anfrage ausgeführt wird. Zusätzliche Parameter:
|
Detaillierte Erklärung
Diese Funktion ist eine abgekürzte Ajax-Funktion und entspricht:
$.ajax({ url: url, data: data, success: callback, dataType: json );
Die an den Server gesendeten Daten können als Query-String an das Ende der URL angehängt werden. Wenn data Der Wert des Parameters ist ein Objekt (Abbild), dann wird es vor dem Hinzufügen an die URL in einen String umgewandelt und URL-kodiert.
Wird an callback Die zurückgegebenen Daten können JavaScript-Objekte sein oder Arrays, die als JSON-Struktur definiert sind, und die mit dem Methoden $.parseJSON() analysiert werden.
Beispiel
Von test.js JSON-Daten laden und ein name-Feld aus den JSON-Daten anzeigen:
$.getJSON("test.js", function(json){ alert("JSON Data: " + json.users[3].name); );
Mehr Beispiele
Beispiel 1
4 der neuesten Fotos über Katzen aus dem Flickr JSONP API laden:
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
Von test.js JSON-Daten laden, zusätzliche Parameter hinzufügen und ein name-Feld aus den JSON-Daten anzeigen:
$.getJSON("test.js", { name: "Bill", time: "2pm" }, function(json){ alert("JSON Data: " + json.users[3].name); );