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 + " ");
    );
  );
);

Versuchen Sie es selbst

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:

  • response - Enthält die Daten des Ergebnisses der Anfrage
  • status - Enthält den Status der Anfrage
  • xhr - Enthält XMLHttpRequest-Objekt

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);
);