jQuery异步获取json数据的2种方式
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方法。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。