jQuery.getJSON()

jQuery.getJSON( url [, data ] [, success ] )返回类型:jqXHR

描述:利用HTTP GET请求,从服务器载入JSON编码的数据。

这是一个简写的Ajax函数,它等同于:

1
2
3
4
5
6
$.ajax({
dataType: "json",
url: url,
data: data,
success: success
});

要发送到服务器的数据,作为一个查询字符串,追加到URL后面。如果data参数的值是一个扁平对象,它会转换为一个字符串,并作url-encode编码,然后追加到URL后面。

更多的实现器将指定一个成功的处理函数:

1
2
3
4
5
6
7
8
9
10
11
$.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文件的结构:

1
2
3
4
5
{
"one": "Singular sensation",
"two": "Beady little eyes",
"three": "Little birds pitch by my doorstep"
}

使用此结构,此示例循环变请求的数据,建立了一个无序列表,把它追加到body后部。

success回调函数传递了返回的数据,它们通常是一个JavaScript对象,或数组,如JSON结构所定义的,并使用$.parseJSON()方法来解析。它还传递了响应的文本状态。

自从jQuery 1.5以来success回调函数检索"jqXHR" 对象(在jQuery 1.4中,它检索XMLHttpRequest对象)。然而,因为JSONP和跨域GET请求并不使用XHR,在那种情况下,传给success回调函数的jqXHRtextStatus参数是undefined

重点:自从jQuery 1.4以来,如果JSON文件包含了一个语法错误,请求通常会静默地失败。出于这个原因,请避免频繁地手工编辑JSON数据。JSON是一种数据交换格式,其语法规则比JavaScript的对象常值记号法要严格。举个例子,所有的在JSON表达的字符串,无论它们是属性还是值,都必须用双引号包围起来。欲了解JSON格式的细节,请参阅http://json.org/

JSONP

如果URL包含了字符串“callback=?”(或类似地,如服务器端API所定义),请求会被视为JSONP。请参阅$.ajax()中对jsonp数据类型的讨论,以了解更多细节。

The jqXHR Object

自从jQuery 1.5以来,所有的jQuery的Ajax方法都返回XMLHTTPRequest对象的一个超级。此jQuery XHR对象,或$.getJSON()方法返回的“jqXHR”,实现了应答对象的接口,给了它应答对象的所有的属性、方法和行为(请参阅延迟对象以了解更多信息)。jqXHR.done()方法(针对success)、jqXHR.fail()方法(针对error)和jqXHR.always()方法(针对completion,无论是success还是error,在jQuery 1.6中添加)取用了一个函数参数,在请求终结时调用它们。欲进一步了解此函数接受的参数,请参阅$.ajax()文档的jqXHR 对象部分。

jQuery 1.5中,应答对象接口也允许jQuery的Ajax方法,包括$.get(),在一个请求上连缀多个.done().fail().always()回调函数,甚至在请求可能已经结事后再设置这些回调函数。如果请求已经结束,会立即引发回调函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.getJSON( "example.json", function() {
console.log( "success" );
})
.done(function() {
console.log( "second success" );
})
.fail(function() {
console.log( "error" );
})
.always(function() {
console.log( "complete" );
});
// Perform other work here ...
// Set another completion function for the request above
jqxhr.complete(function() {
console.log( "second complete" );
});

淘汰通知

自从jQuery 3.0以来,已经删除了jqXHR.success()jqXHR.error()jqXHR.complete()回调函数方法。你可以使用jqXHR.done()jqXHR.fail()jqXHR.always()方法来代替。

补充说明:

  • 由于浏览器安全性限制,大多数“Aajx”请求都服从同源策略;请求不能从不同的域名、不同的子域、端口或协议成功地检索到数据。
  • Script请求和JSONP请求不服从同源策略限制。

示例:

从Flicker JSONP API载入最近的四幅雷纳山的照片。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.getJSON demo</title>
<style>
img {
height: 100px;
float: left;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="images"></div>
<script>
(function() {
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
$.getJSON( flickerAPI, {
tags: "mount rainier",
tagmode: "any",
format: "json"
})
.done(function( data ) {
$.each( data.items, function( i, item ) {
$( "<img>" ).attr( "src", item.media.m ).appendTo( "#images" );
if ( i === 3 ) {
return false;
}
});
});
})();
</script>
</body>
</html>

演示:

从test.js载入JSON数据,并访问来自返回的JSON数据的某个名称。

1
2
3
$.getJSON( "test.js", function( json ) {
console.log( "JSON Data: " + json.users[ 3 ].name );
});

从test.js载入JSON数据,随同传递额外的数据,并返回来自返回的的JSON数据的某个名称。 If an error occurs, log an error message instead.

1
2
3
4
5
6
7
8
$.getJSON( "test.js", { name: "John", time: "2pm" } )
.done(function( json ) {
console.log( "JSON Data: " + json.users[ 3 ].name );
})
.fail(function( jqxhr, textStatus, error ) {
var err = textStatus + ", " + error;
console.log( "Request Failed: " + err );
});