返回值:XMLHttpRequestjQuery.getJSON(url, [data], [callback(data, textStatus, xhr)])
通过 HTTP GET 方式从服务器载入 JSON 编码的数据。
-
1.0 新增jQuery.getJSON(url, [data], [callback(data, textStatus, xhr)])
url (String) 将要请求的 URL 字符串。data (Map) 可选参数,发送给服务器的字符串或者映射。callback(data, textStatus, xhr) (Function) 可选参数,当请求成功后会执行的回调函数。
这是一个 Ajax 函数的简写形式。他等价于:
$.ajax({ url: url, dataType: 'json', data: data, success: callback });
数据会以 URL 查询字符串形式发送给服务器。如果 data
参数的值是一个对象(映射),他会自动被转换成 URL 编码的字符串。
回调函数会传入一个返回的数据,这个数据是由 $.parseJSON()
方法解析后得到的 JavaScript 对象或者数组。
大多数情况下都会指定一个请求成功后的回调函数:
$.getJSON('ajax/test.json', function(data) { $('.result').html('<p>' + data.foo + '</p>' + '<p>' + data.baz[1] + '</p>'); });
当然,这个例子需要依赖下面的 JSON 文件结构:
{ "foo": "The quick brown fox jumps over the lazy dog.", "bar": "ABCDEFG", "baz": [52, 97] }
使用这种结构数据后,这个例子就能把第一个字符串和第二个数字插入到页面当中。
重要提示: 从 jQuery 1.4 起,如果 JSON 文件包含语法错误,这个请求会失败而不会返回任何提示信息。因此,请尽量避免频繁地手动编辑 JSON 数据。JSON 是一个数据交换格式,所以他的语法规则比普通的 JavaScript 对象字面量表示法还要严格。比如 JSON 中的所有字符串都必须用双引号包裹,不管他是属性还是值。更多信息请参考:http://json.org/。
JSONP
如果 URL 中包涵字符串 "callback=?" (或者其他类似的,取决于服务器端 API 是如何定义的),这个请求就会被看做 JSONP 请求。更多关于 jsonp
数据类型的探讨,请参考 $.ajax()
。
示例:
用 Flickr 的 JSONP API 载入最近的四张关于猫的图片。
<!DOCTYPE html>
<html>
<head>
<style>img{ height: 100px; float: left; }</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div id="images">
</div>
<script>
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
{
tags: "cat",
tagmode: "any",
format: "json"
},
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 数据中获得 name 的值。
jQuery 代码:
$.getJSON("test.js", function(json) {
alert("JSON Data: " + json.users[3].name);
});
示例:
从 test.js 中载入 JSON 数据,传递一个附加的数据,并且从返回的 JSON 数据中获得 name 的值。
jQuery 代码:
$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
alert("JSON Data: " + json.users[3].name);
});
示例:
列出从 pages.php 中获得的信息。
jQuery 代码:
var id=$("#id").attr("value");
$.getJSON("pages.php",{id:id},dates);
function dates(datos) {
$("#list").html("Name:"+datos[1].name+"<br>"+"Last Name:"+datos[1].lastname+"<br>"+"Address:"+datos[1].address);
}