Heim  >  Artikel  >  Web-Frontend  >  Beispiel für die Verwendung von getJSON() in jQuery+Ajax

Beispiel für die Verwendung von getJSON() in jQuery+Ajax

高洛峰
高洛峰Original
2017-01-12 10:04:091086Durchsuche

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn