jQuery ajax - getJSON() methode

jQuery Ajax 参考手册

Voorbeeld

Obtaining JSON data using AJAX requests and outputting the results:

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

Probeer het zelf

Definitie en gebruik

Laden van JSON-data via HTTP GET-aanvraag.

In jQuery 1.2 kunt u JSON-data van andere domeinen laden met behulp van JSONP-vormige callback-functies, zoals "myurl?callback=?". jQuery vervangt automatisch ? door de juiste functienaam om de callback-functie uit te voeren. Let op: de code hieronder wordt uitgevoerd voordat de callback-functie wordt uitgevoerd.

Syntax

jQuery.getJSON(url,data,success(data,status,xhr)})
Parameters Beschrijving
url Verplicht. Bepaalt welke URL de aanvraag wordt verzonden.
data Optioneel. Bepaalt de gegevens die samen met de aanvraag naar de server worden gestuurd.
success(data,status,xhr)}

Optioneel. Bepaalt de functie die wordt uitgevoerd wanneer de aanvraag succesvol is.

Aanvullende parameters:

  • response - Bevat de resultaten van de aanvraag
  • status - Bevat de status van de aanvraag
  • xhr - Bevat XMLHttpRequest-object

Uitleg

Deze functie is een verkorte Ajax-functie, equivalent aan:

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

De gegevens die naar de server worden verzonden kunnen als een query string worden toegevoegd aan het einde van de URL. Als data De waarde van het parameter is een object (map), dan wordt het omgezet in een string en gecodeerd voor URL voordat het aan de URL wordt toegevoegd.

wordt doorgegeven aan callback De retourgegevens kunnen een JavaScript-object zijn, of een array gedefinieerd in JSON-structuur, en worden geanalyseerd met de methode $.parseJSON().

Voorbeeld

Laden van JSON-gegevens uit test.js en weergeven van een name-veld in de JSON-gegevens:

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

Meer voorbeelden

Voorbeeld 1

Laden van 4 nieuwste afbeeldingen over katten via de JSONP-API van Flickr:

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

Voorbeeld 2

Laden van JSON-gegevens uit test.js, toevoegen van parameters, weergeven van een name-veld in de JSON-gegevens:

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

jQuery Ajax 参考手册