本文實例講述了jQuery實現異步獲取json數據的2種方式，在web程序開發中非常具有實用價值。分享給大家供大家參考之用。具體方法如下：
通常來說，jQuery異步獲取json數據有2種方式，一個是$.getJSON方法，一個是$.ajax方法。本文就來實現使用這2種方式異步獲取json數據，然后追加到頁面。
在根目錄下創建data.json文件：
{ "one" : "Hello", "two" : "World"} 一、通過$.getJSON方法獲取json數據
<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數據
<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方法。
PS：關于json操作，這里再為大家推薦幾款比較實用的json在線工具供大家參考使用： 在線JSON代碼檢驗、檢驗、美化、格式化工具： JSON在線格式化工具： 在線XML/JSON互相轉換工具： json代碼在線格式化/美化/壓縮/編輯/轉換工具： 在線json壓縮/轉義工具： http://tools.VeVB.COm/code/json_yasuo_trans C語言風格/HTML/CSS/json代碼格式化美化工具：
http://tools.VeVB.COm/code/json
http://tools.VeVB.COm/code/jsonformat
http://tools.VeVB.COm/code/xmljson
http://tools.VeVB.COm/code/jsoncodeformat
http://tools.VeVB.COm/code/ccode_html_css_json
相信本文所述對大家的jQuery程序設計有一定的借鑒價值。
新聞熱點
疑難解答
