返回值:XMLHttpRequestjQuery.getJSON(url, [data], [callback(data, textStatus, xhr)])

通过 HTTP GET 方式从服务器载入 JSON 编码的数据。

这是一个 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);
}