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