首页 > 代码库 > jQuery异步获取json数据的2种方式
jQuery异步获取json数据的2种方式
jQuery异步获取json数据有2种方式,一个是$.getJSON方法,一个是$.ajax方法。本篇体验使用这2种方式异步获取json数据,然后追加到页面。
在根目录下创建data.json文件:
{"one" : "Hello","two" : "World"}
■ 通过$.getJSON方法获取json数据
<script src="http://www.mamicode.com/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="http://www.mamicode.com/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方法。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。