首页 > 代码库 > jquery getJson

jquery getJson

2024-07-10 18:23:31   223人阅读

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 requestvar 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 abovejqxhr.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>

 


联系
我们