jquery 手册
Ajax
属性(Attributes)
回调对象(Callbacks ..
核心(Core)
CSS
数据(Data)
延迟对象(Deferred o ..
尺寸(Dimensions)
效果(Effects)
事件(Events)
表单(Forms)
文档操作(Manipulati ..
杂项(Miscellaneou ..
位置(Offset)
插件编写(Plugin Aut ..
属性(Properties)
选择器(Selectors)
遍历(Traversing)
工具(Utilities)

Returns: jqXHRjqXHR jQuery.getJSON( String url, Map data, Function success(data, textStatus, jqXHR) )

描述: 通过使用一个HTTP GET请求加载JSON-encoded数据。
  • version added: 1.0
  • jQuery.getJSON( String url, Map data, Function success(data, textStatus, jqXHR) )
  • url 一个字符串,包含请求将被发送到的URL。
    data 一个json数据或字符串,通过请求发送到服务端.
    success(data, textStatus, jqXHR) 一个回调函数,如果请求成功该函数将执行。

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

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

发送到服务端的数据被附加到URL后面并作为查询字符串。如果data参数是一个对象(map),将被转换为字符串并在附加到URL之前加密(url-encoded)

Most implementations will specify a success handler:

$.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"
}
// 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"); });

Examples:

例子:

从Flickr JSONP API加载最近4张关于猫的图片。
<!DOCTYPE html>
<html>
<head>
  <script src="../jquery.min.js"></script>
  <style>img{ height: 100px; float: left; }</style>
</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数据并从中访问name属相。
$.getJSON("test.js", function(json) {
   alert("JSON Data: " + json.users[3].name);
 });

Example:

从test.js加载JSON数据, 传递额外的数据,并从中访问name属相。
$.getJSON("test.js", { name: "John", time: "2pm" }, function(json) {
    alert("JSON Data: " + json.users[3].name);
    });