jquery請求json資料

標籤：number   頁面   end   .net   http   keyword   appendto   func   通過   

本文執行個體講述了jQuery實現非同步擷取json資料的2種方式，在web程式開發中非常具有實用價值。分享給大家供大家參考之用。具體方法如下：

通常來說，jQuery非同步擷取json資料有2種方式，一個是$.getJSON方法，一個是$.ajax方法。本文就來實現使用這2種方式非同步擷取json資料，然後追加到頁面。

在根目錄下建立data.json檔案：

?

1234	{ "one" : "Hello", "two" : "World"}

 

一、通過$.getJSON方法擷取json資料

?

123456789101112131415

<script src="Scripts/jquery-2.1.1.min.js"></script><script type="text/javascript"> $(function() {  $.getJSON(‘data.json‘, function(data) {   var items = [];   $.each(data, function(key, val) {    items.push(‘<li id="‘ + key + ‘">‘ + val + ‘</li>‘);   });   $(‘<ul/>‘, {    ‘class‘: ‘list‘,    html: items.join(‘‘)   }).appendTo(‘body‘);  }); });</script>

 

二、通過$.ajax方法擷取json資料

?

123456789101112131415161718192021222324

<script src="Scripts/jquery-2.1.1.min.js"></script><script type="text/javascript"> $(function() {  $.ajax({   url: ‘data.json‘,   dataType: ‘json‘,   success: function(data) {    var items = [];    $.each(data, function(key, val) {     items.push(‘<li id="‘ + key + ‘">‘ + val + ‘</li>‘);    });    $(‘<ul/>‘, {     ‘class‘: ‘list‘,     html: items.join(‘‘)    }).appendTo(‘body‘);   },   statusCode: {    404: function() {     alert("沒有找到相關檔案~~");    }   }  }); });</script>

總結：使用$.getJSON方法和$.ajax方法都能達到相同的效果，但是，如果想對非同步擷取的過程有更細節的控制，推薦使用$.ajax方法。

 

jquery請求json資料