Metoda jQuery ajax - getJSON()

Podręcznik referencyjny jQuery Ajax

Przykład

Używając żądania AJAX do uzyskania danych JSON i wyświetlenia wyników:

$("button").click(function(){
  $.getJSON("demo_ajax_json.js",function(result){
    $.each(result, function(i, field){
      $("div").append(field + " ");
    );
  );
);

Spróbuj sam

Definicja i użycie

Ładowanie danych JSON za pomocą żądania HTTP GET.

W jQuery 1.2 można załadować dane JSON z innego domeny za pomocą formy JSONP z funkcją zwrotną, np. "myurl?callback=?". jQuery automatycznie zastępuje ? poprawną nazwą funkcji, aby wykonać funkcję zwrotną. Uwaga: kod poniżej będzie wykonywany przed wykonaniem tej funkcji zwrotnej.

Gramatyka

jQuery.getJSON(url,data,success(data,status,xhr))
Parametry Opis
url Wymagane. Określa,哪个 URL ma być wysłany żądanie.
data Wybór. Określa dane wysyłane razem z żądaniem do serwera.
success(data,status,xhr)

Opcjonalne. Określa funkcję uruchamianą przy udanym żądaniu.

Dodatkowe parametry:

  • response - Zawiera wyniki z żądania
  • status - Zawiera stan żądania
  • xhr - Zawiera obiekt XMLHttpRequest

Szczegółowy opis

Ta funkcja jest uproszczoną funkcją Ajax, równoważną:

$.ajax({
  url: url,
  data: data,
  success: callback,
  dataType: json
);

Dane wysyłane do serwera mogą być dodane jako ciąg znaków do URL po nim. Jeśli data Jeśli wartość parametru jest obiektem (mapą), zostanie ona przekształcona w ciąg znaków i zakodowana URL przed dodaniem do URL.

Przekazuj do callback Zwrócone dane mogą być obiektem JavaScript lub tablicą zdefiniowaną w strukturze JSON, i są analizowane za pomocą metody $.parseJSON().

Przykład

Wczytaj dane JSON z test.js i wyświetl dane z pola name w danych JSON:

$.getJSON("test.js", function(json){
  alert("Dane JSON: " + json.users[3].name);
);

Więcej przykładów

Przykład 1

Wczytaj 4 najnowsze obrazy o kotach z API JSONP Flickr:

Kod HTML:

<div id="images"></div>

Kod jQuery:


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

Przykład 2

Wczytaj dane JSON z test.js, dodaj parametry, wyświetl dane z pola name w danych JSON:

$.getJSON("test.js", { name: "Bill", time: "2pm" }, function(json){
  alert("Dane JSON: " + json.users[3].name);
);

Podręcznik referencyjny jQuery Ajax