Metode jQuery ajax - getJSON()

Contoh

Menggunakan permintaan AJAX untuk memperoleh data JSON dan menampilkan hasil:

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

Coba sendiri

Definisi dan penggunaan

Muat data JSON melalui permintaan HTTP GET.

Pada jQuery 1.2, Anda dapat memuat data JSON dari domain lain menggunakan bentuk JSONP dengan fungsi balik, seperti "myurl?callback=?". jQuery akan secara otomatis mengganti ? dengan nama fungsi yang benar untuk melaksanakan fungsi balik. Perhatian: kode di baris setelah ini akan dijalankan sebelum fungsi balik dieksekusi.

Sintaks

jQuery.getJSON(url,data,success(data,status,xhr)})
Parameter Deskripsi
url Wajib. Tentukan URL mana yang permintaan akan diirimkan.
data Pilihan. Tentukan data yang diirimkan bersama permintaan ke server.
success(data,status,xhr)}

Pilihan. Tentukan fungsi yang dijalankan saat permintaan sukses.

Parameter ekstra:

  • response - Mengandung data hasil permintaan
  • status - Mengandung status permintaan
  • xhr - Mengandung objek XMLHttpRequest

Keterangan detil

Fungsi ini adalah pendek fungsi Ajax, setara dengan:

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

Data yang dikirim ke server dapat disambungkan sebagai string query setelah URL. Jika data Nilai parameter adalah objek (peta), maka akan diubah menjadi string dan di-URL-encode sebelum disambungkan ke URL.

Dialihkan ke callback Data yang kembali, dapat berupa objek JavaScript, atau array yang didefinisi struktur JSON, dan diurai menggunakan metode $.parseJSON().

Contoh

Muat JSON data dari test.js dan tampilkan data field name dalam JSON data:

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

Beberapa contoh lain

Contoh 1

Muat 4 gambar terbaru tentang kucing dari API JSONP Flickr:

Kode HTML:

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

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

Contoh 2

Muat JSON data dari test.js, tambahkan parameter, dan tampilkan data field name dalam JSON data:

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