本文實例講述了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方法。
相信本文所述對大家的jQuery程序設計有一定的借鑒價值。