JQuery.getJSON

描述:
      使用 "GET" HTTP请求从服务器导入JSON格式数据。
JQuery.getJSON(url [,data] [,success])
url
类型:字符串
一个包含发送请求的链接

data
类型:一般对象([PlainObject](http://api.jquery.com/Types/#PlainObject))或字符串
根据请求被发送至服务器的一般对象或字符串

success
类型:函数对象
请求成功执行的函数

它是一个缩略的Ajax函数,等价于:

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

发送给服务器的Data会被附加至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回调传入的返回的数据,该数据根据JSON结构来定义,是典型地一个JS对象或数组,然后使用parseJSON()方法来转换。该函数也能响应文本格式。

JQuery 1.5 中,成功函数接收一个"jqXHR" 对象(在JQuery 1.4中,它接收XMLHTTPObject对象)。然后,因为JSONP和跨域的GET请求不使用XHR,所以在这样的案例中传入成功函数的jqXHR和textStatus属于未定义。

重要:

JQuery 1.5 中,如果JSON文件包含一个语法错误,请求通常会默默失败,避免因为这个原因而频繁地手动修改JSON数据。JSON这种数据交换格式,拥有比其它JS对象的文字记法严格的多的语法规则。例如,JSON中的所有字符串,无论是属性还是值,都必须用双引号引起。查询更多JSON格式的语法细节,请参考:http://json.org/.

JSONP

如果传入的URL包括字符串“callback=?”(或类似的,由服务器API定义的),该请求会被替代为JSONP请求。参考$.ajax()中有关JSONP的讨论获得更多细节。

jqXHR对象

在JQuery 1.5 中,所有的JQuery Ajax 方法都会返回一个XMLHTTPObject对象的超集。这个JQuery XHR对象,即jqXHR,由$.getJSOnPromise接口返回,返回一个Promise全部的属性,方法和行为(参阅: Deferred object)。jqXHR.done()(用于成功),jqXHR.fail()(用于错误)和jqXHR.always()(用于完成,无论成功与否,于JQuery 1.6添加)都会在请求结束时传入一个函数作为参数执行。关于这个函数接收的参数的更多信息,请参阅$.ajax文档的jqXHR Object 一节。

JQuery 1.5Promise接口允许JQuery Ajax 方法,包括$.getJSON(),在一个请求中,链式添加.done().always(),和.fail()回调,甚至在请求可能完成时分配这些回调。如果请求已经完成,回调会被立即清除。

// 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" );
});
清除说明:

jqXHR.success()jqXHR.error()jqXHR.complete已经在JQuery 3.0中被移除,取而代之的是jqXHR.done()jqXHR.fail()jqXHR.always()

附加说明:
  • 因为浏览器的安全限制,大多“Ajax”请求都是同源策略的对象:请求不会成功取回来自不同域,子域,端口或协议的数据。
  • ScriptJSONP请求不是同源策略的对象。

例子:

使用 Flicker JSONP API 导入四张最近关于Mount Rainer 的图片

<!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>
Demo

text.js中导入JSON数据,然后从返回的JSON数据中获得name

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

text.js中导入JSON数据,传递额外的数据,然后从返回的JSON数据中获得name,如果出现错误,写下错误信息:

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

以上是我翻译JQuery文档的第一篇稿,疏漏或错误的地方,希望指正,欢迎来评论区讨论。初来乍到,多多关照。 :)

原文请戳我

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269

推荐阅读更多精彩内容