Jquery getJSON方法使用教程

本文讲的是如何在jQuery中使用getJSON() 方法,通过代码实例给出了getJSON()的使用,希望对你有所帮助。

JSON是一种理想的数据传输格式,它能够很好的融合与JavaScript或其他宿主语言,并且可以被JS直接使用。使用JSON相比传统的通过 GET、POST直接发送“裸体”数据,在结构上更为合理,也更为安全。至于jQuery的getJSON()函数,只是设置了JSON参数的 ajax()函数的一个简化版本。这个函数也是可以跨域使用的,相比get()、post()有一定优势。另外这个函数可以通过把请求url写 成”myurl?callback=X”这种格式,让程序执行回调函数X。

getJSON(url,[data],[callback])
url (String) 发送请求地址
data (Map) (可选) 待发送 Key/value 参数
callback (Function) (可选) 载入成功时回调函数。

这是一个快速的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”。

在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:

See the Pen getJSON by kujian (@kujian) on CodePen.


演示 演示2 对象演示 数组演示

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

http://lab.julying.com/jQuery-api-1.7/docs/jQuery.getJSON/index.html

http://my.oschina.net/duwaiweb/blog/80576

http://rain-2372.iteye.com/blog/1124765

http://blog.csdn.net/huileiforever/article/details/12163385

http://stackoverflow.com/questions/17226030/use-each-and-if-with-getjson

http://www.w3school.com.cn/jquery/ajax_getjson.asp


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流