jQuery ajax - getJSON() 用法執行個體

執行個體

從 test.js 載入 JSON 資料并顯示 JSON 資料中一個 name 字段資料：

$.getJSON("test.js", function(json){

  alert("JSON Data: " + json.users[3].name);

});      

定義和用法

通過 HTTP GET 請求載入 JSON 資料。

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

文法

jQuery.getJSON(url,[data],[callback])      

參數	描述
url	待載入頁面的 URL 位址。
data	待發送 Key / value 參數。
callback	載入成功時執行的回調函數。

詳細說明

該函數是簡寫的 Ajax 函數，等價于：

$.ajax({

  url: url,

  data: data,

  success: callback,

  dataType: json

});      

發送到伺服器的資料可作為查詢字元串附加到 URL 之後。如果 data 參數的值是對象（映射），那麼在附加到 URL 之前将轉換為字元串，并進行 URL 編碼。

傳遞給 callback 的傳回資料，可以是 JavaScript 對象，或以 JSON 結構定義的數組，并使用 $.parseJSON() 方法進行解析。

更多執行個體

例子 1

從 Flickr JSONP API 載入 4 張最新的關于貓的圖檔：

HTML 代碼：

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

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;

  });

});      

例子 2

從 test.js 載入 JSON 資料，附加參數，顯示 JSON 資料中一個 name 字段資料：

$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){

  alert("JSON Data: " + json.users[3].name);

});