jQuery ajax - getJSON() 方法

Panduan Ajax jQuery

實例

使用 AJAX 請求來獲得 JSON 數據，並輸出結果：

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

親自試一試

定義和用法

通過 HTTP GET 請求載入 JSON 數據。

在 jQuery 1.2 中，您可以通过使用 JSONP 形式的回調函數來加載其他網域的 JSON 數據，如 "myurl?callback=?"。jQuery 將自動替換 ? 為正確的函數名，以執行回調函數。注意：此行以後的代碼將在這個回調函數執行前執行。

語法

jQuery.getJSON(url,data,success(data,status,xhr)})
參數 描述
url 必需。規定將請求發送的哪個 URL。
data 可选。規定連同請求發送到伺服器的數據。
success(data,status,xhr)}

Pilihan. Menentukan fungsi yang akan dijalankan apabila permintaan berjaya.

Parameter tambahan:

  • response - Mereka mengandungi data hasil permintaan
  • status - Mereka mengandungi status permintaan
  • xhr - Mereka mengandungi objek XMLHttpRequest

Pengarahan

Fungsi ini adalah fungsi Ajax yang disingkat, sepadan dengan:

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

Data yang dihantar kepada pelayan boleh disambungkan kepada URL selepas simbol tanya (?). Jika data Nilai parameter adalah objek (peta), maka akan diubahsuai kepada string dan dienkodikan URL sebelum disambungkan kepada URL.

dihantar kepada callback Data yang kembali, boleh menjadi objek JavaScript, atau array yang didefinikan dalam struktur JSON, dan diarsikaskan menggunakan metod $.parseJSON().

Contoh

Muatkan data JSON daripada test.js dan tunjukkan data field name dalam data JSON:

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

Lebih banyak contoh

Contoh 1

Muatkan 4 imej terbaru tentang kucing daripada 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;
  );
);

Contoh 2

Muatkan data JSON daripada test.js, tambahkan parameter, dan tunjukkan data field name dalam data JSON:

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

Panduan Ajax jQuery