首頁  >  文章  >  web前端  >  有關jQuery.getJSON() 函數的用法詳解

有關jQuery.getJSON() 函數的用法詳解

巴扎黑
巴扎黑原創
2017-07-03 09:30:571225瀏覽

jQuery.getJSON()函數用於透過HTTP GET形式的AJAX請求取得遠端JSON編碼的資料。

JSON是一種資料格式,JS原生支援JSON格式,透過jQuery.getJSON()從伺服器取得的JSON數據,jQuery會先嘗試將其轉為對應的JS物件。

如果請求的URL中包含"callback=?"等類似的部分,jQuery會自動將其視為JSONP,並執行對應的回呼函數來取得JSON資料。

重要注意:伺服器傳回的JSON資料必須符合嚴格的JSON語法,例如:所有屬性名稱必須加雙引號,所有字串值也必須加雙引號(而不是單引號)。

請注意,該函數是透過非同步方式載入資料的。

該函數屬於全域jQuery物件。

語法

jQuery 1.0 新增該靜態函數。

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

參數

參數 描述

url String類型指定請求的目標URL。

data 可選/String/Object類別型發送請求傳遞的資料。

success 可選/Function類型請求成功時執行的回呼函數。它有3個參數:其一是請求傳回的數據,其二是請求狀態文字(例如"success"、 "notmodified"),其三是當前jqXHR物件(jQuery 1.4及之前版本,該參數為原生的XMLHttpRequest對象)。

參數success指定的回呼函數只有在請求成功時才會執行,如果請求失敗(例如找不到頁面、伺服器錯誤等)則不作任何處理。

傳回值

jQuery.getJSON()函數的回傳值為jqXHR類型,傳回發送該要求的jqXHR物件(jQuery 1.4及先前版本傳回的是原生的XMLHttpRequest物件)。

範例&說明

jQuery.getJSON()是jQuery.ajax()函數的如下簡寫形式:

jQuery.getJSON(url, data, success);
// 等价于
$.ajax({
 url: url,
 type: "GET",
 data: data,
 success: success,
 dataType: "json"
});

請參考以下這段HTML範例程式碼:

<div id="content1">CodePlayer</div>
<div id="content2">专注于编程开发技术分享</div>
<div id="content3">http://www.365mini.com</div>

以下是與jQuery.getJSON()函數相關的jQuery範例程式碼,以示範jQuery.getJSON()函數的具體用法:

//获取index.php?type=json的JSON数据,但不作任何处理
$.getJSON( "index.php?type=json" );
// 等价于 index.php?id=5&orderId=5&money=100
$.getJSON( "index.php?id=5", "orderId=5&money=100" );
// 等价于 http://localhost/index.php?id=5&orderId=5&money=100
$.getJSON( "http://localhost/index.php?id=5", {orderId: 5, money: 100} );
/* ***** 一般不会使用上述不对获取的JSON数据作任何处理的用法***** */
// 获取index.php?type=json的JSON数据,获取成功时弹出对话框
$.getJSON( "index.php?type=json", function(data, textStatus, jqXHR){
    // data 是该请求返回的数据(可能经过处理)
    // textStatus 可能是"success"、 "notmodified"等
    // jqXHR 是经过jQuery封装的XMLHttpRequest对象(保留其本身的所有属性和方法)
    // 如果服务器返回的JSON格式的数据是 {"id": 5, "name": "CodePlayer"}
    // JSON格式的数据的属性名称必须加双引号,字符串值必须加双引号。
    // jQuery已经将其转换成对应的JS对象
    alert( data.id ); // 5
    alert( data.name ); // CodePlayer
} );
// 获取"/action.php?m=list&page=2&size=10"的JSON数据,获取成功时弹出对话框
$.getJSON( "/action.php?m=list", { page: 2, size: 10  }, function(data, textStatus, jqXHR){
    // 如果服务器返回的JSON格式的数据是 [ {"id":11, "title":"文章11"}, {"id":12, "title":"文章12"}, {"id":13, "title":"文章13"} ]
    // jQuery将获取的JSON格式数据转换为JS数组
    for(var i in data){
        var obj = data[i];
        alert( obj.title );
    }
} );

以上是有關jQuery.getJSON() 函數的用法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn