概述 jQuery.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] )
返回值:XMLHttpRequest
描述:使用一个HTTP GET请求从服务器加载JSON编码的数据。
这是一个Ajax函数的缩写,这相当于:
- $.ajax({
- dataType: "json",
- url: url,
- data: data,
- success: success
- });
数据会被附加到一个查询字符串的URL中,发送到服务器。如果该值的data
参数是一个普通的对象,它会转换为一个字符串并使用URL编码,然后才追加到URL中。
大多数情况下都会指定一个请求成功后的回调函数:
- $.getJSON('ajax/test.json', function(data) {
- var items = [];
-
- $.each(data, function(key, val) {
- items.push('<li id="' + key + '">' + val + '</li>');
- });
-
- $('<ul/>', {
- 'class': 'my-new-list',
- html: items.join('')
- }).appendTo('body');
- });
这个示例,当然遵循JSON文件的结构:
- {
- "one": "Singular sensation",
- "two": "Beady little eyes",
- "three": "Little birds pitch by my doorstep"
- }
使用这种结构,这个示例遍历请求的数据,建立了一个无序列表,并追加到body。
在success
回调中传入返回的数据,通常是一个JavaScript对象或数组所定义的JSON结构,使用$.parseJSON()
方法解析。它(success
回调)也传入了响应状态文本。
在jQuery 1.5,,在success
回调函数接收一个“jqXHR”对象 ( 在jQuery 1.4中 ,它收到的是XMLHttpRequest
对象)。然而,由于JSONP形式和跨域的GET请求不使用XHR,在这些情况下, jqXHR
和textStatus
参数传递给success(成功)回调是 undefined 。
重要提示: 从jQuery 1.4开始,如果JSON文件包含一个语法错误,该请求通常会静静的失败。因此应该避免频繁手工编辑JSON数据。JSON语法规则比JavaScript对象字面量表示法更加严格。例如,所有在JSON中的字符串,无论是属性或值,必须用双引号括起来,更多JSON细节信息请参阅http://json.org/ 。
如果URL包含字符串“callback=?”(或类似的参数,取决于服务器端 API 是如何定义的),这个请求被视为JSONP形式请求。更多jsonp
数据类型的细节讨论,请参阅$.ajax()
。
从jQuery 1.5开始,所有jQuery的Ajax方法都返回一个XMLHTTPRequest
对象的超集。这个通过$.getJSON()
方法返回的jQuery XHR对象,或“jqXHR,”实现了 Promise 接口,使它拥有 Promise 的所有属性,方法和行为。jqXHR.done()
(表示成功), jqXHR.fail() (表示错误)
, 和 jqXHR.always()
(表示完成, 无论是成功或错误;在jQuery 1.6 中添加) 方法接受一个函数参数,用来请求终止时被调用。关于这个函数接收参数的详细信息,请参阅 jqXHR Object 文档中的 $.ajax() 章节。
Promise 接口也允许jQuery的Ajax方法, 包括 $.getJSON()
, 在一个单独的请求中关联到 .success()
, .complete()
, 和 .error()
回调函数, 甚至允许你在请求已经结束后,指派回调函数。如果该请求已经完成,则回调函数会被立刻调用。
- // Assign handlers immediately after making the request,
- // and remember the jqxhr object for this request
- var jqxhr = $.getJSON("example.json", function() {
- alert("success");
- })
- .success(function() { alert("second success"); })
- .error(function() { alert("error"); })
- .complete(function() { alert("complete"); });
-
- // perform other work here ...
-
- // Set another completion function for the request above
- jqxhr.complete(function(){ alert("second complete"); });
jQuery 1.5中引进的 jqXHR.success()
,jqXHR.error()
,jqXHR.complete()
回调方法在jQuery 1.5中引进, 在jQuery 1.8中不赞成使用,已经过时。他们最终将被取消(移除),你的代码应该为次做好准备, 从jQuery 3.0开始被删除,你可以使用jqXHR.done()
, jqXHR.fail()
, 和 jqXHR.always()
代替。
示例
从 Flickr JSONP API 载入 4 张最新的关于猫的图片。
<div id="images"></div>
$.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;
});
});
从 test.js 载入 JSON 数据并显示 JSON 数据中一个 name 字段数据。
$.getJSON("test.js", function(json){
alert("JSON Data: " + json.users[3].name);
});
从 test.js 载入 JSON 数据,附加参数,显示 JSON 数据中一个 name 字段数据。
$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
alert("JSON Data: " + json.users[3].name);
});