jQuery.getJSON()

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

描述:通过 HTTP GET 请求从服务器载入 JSON 数据。

version added: 1.0jQuery.getJSON( url, [ data ], [ success(data, textStatus, jqXHR) ] )

url一个包含发送请求的URL字符串

data向服务器发送请求的Key/value参数

success(data, textStatus, jqXHR)当请求成功后执行的回调函数。

这是一个快速的AJax处理函数，相当于:

$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback
});

数据发送到服务器是作为一个附加到查询字符串的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()方法。它也通过了响应文本状态。

在jQuery 1.5，，在success回调函数接收一个“jqXHR”对象（在jQuery 1.4中，它收到XMLHttpRequest对象）。然而，由于JSONP形式和跨域的GET请求不使用的XHR，在这些情况下， jqXHR和textStatus回调参数传递的成功是不确定的。

重要的： 在jQuery 1.4，如果JSON文件包含一个语法错误，该请求通常会静静的失败。避免频繁手工编辑JSON数据就是这个原因。JSON是一种与语法规则比JavaScript的对象文字符号更加严格的数据交换格式。例如，所有在JSON字符串表示，无论是属性或值，必须用双引号括起来。例如，所有在JSON字符串表示，无论是属性或值，必须用双引号括起来。为了将JSON格式的细节上，看到http://json.org/ 。

JSONP

如果URL包含字符串“回调=？”（或类似的，由服务器端API定义），请求被视为JSONP形式代替。见的讨论jsonp的数据类型$.ajax()的更多细节。

jqXHR 对象

所有jQuery的Ajax方法都返回超集XMLHTTPRequest对象。这个jQuery XHR对象，或“jqXHR”

在jQuery 1.5，所有jQuery的Ajax方法都返回的超集XMLHTTPRequest对象。这个jQuery XHR对象，或“jqXHR，”通过$.getJSON()约定的接口实现返回，给它的所有属性，方法和约定的行为（见Deferred object获取更多信息）。为了方便和一致性，回调名称使用$.ajax()，它提供.error() .success()和.complete()方法。这些方法当$.ajax()请求终止时需要一个函数参数调用，这个函数接收$.ajax()回调函数名相同的参数。

在jQuery 1.5的约定接口也使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"); });

其他注意事项：

由于浏览器的安全限制，大多数“Ajax”的要求，均采用同一起源的政策 ;该请求不能成功地检索来自不同的域，子域或协议的数据。
Script和JSONP形式请求不受同源策略的限制。

Examples:

Example: 从 Flickr JSONP API中加载最近的四张标签为猫的图片：

<!DOCTYPE html>
<html>
<head>
  <style>img{ height: 100px; float: left; }</style>
  <script src="http://code.jquery.com/jquery-1.5.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>

Demo:

Example: 通过test.js加载这个JSON数据，并使用返回的JSON数据中的 name值：

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

Example: 通过额外的Key/value参数从test.js加载这个JSON数据,并使用返回的JSON数据中的 name值：

$.getJSON("test.js", { name: "John", time: "2pm" }, function(json) {
    alert("JSON Data: " + json.users[3].name);
    });