jQuery异步获取json数据方法汇总
更新时间：2014年12月22日 14:57:34 投稿：hebedich
这篇文章主要介绍了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方法。
相关文章
这篇文章主要介绍了jQuery实现的导航动画效果,可实现导航条的底部横条随鼠标移动的效果,涉及jQuery针对鼠标事件的响应及页面元素样式动态变换的相关技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2016-04-04
这篇文章主要介绍了jQuery中appendTo()方法用法,实例分析了appendTo()方法的功能、定义及把匹配的元素插入指定元素结尾的使用技巧,需要的朋友可以参考下2015-01-01
作为轻量级的JS库，jQuery随着JavaScrīpt脚本的大热而备受Web开发者亲睐。本文给大家分享五个有用的jquery小技巧，需要的朋友可以参考下2015-10-10
这篇文章主要介绍了jQuery 编程之jQuery 属性选择器，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-08-08
这篇文章主要介绍了jquery ui 实现 tab标签功能,结合完整实例形式分析了jquery ui 实现 tab标签切换功能的相关操作技巧,需要的朋友可以参考下2019-07-07
这篇文章主要为大家详细介绍了JQuery日期插件datepicker的使用方法，感兴趣的小伙伴们可以参考一下2016-03-03
这篇文章主要介绍了jQuery动态产生select option下拉列表的实现方法,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了jquery实现美观的导航菜单鼠标提示特效代码,涉及jquery鼠标事件及页面animate动画的使用技巧,非常具有实用价值,需要的朋友可以参考下2015-09-09
这篇文章主要介绍了jQuery noConflict() 方法用法,结合实例形式分析了jQuery noConflict() 方法基本功能、用法及操作注意事项,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了nicejforms——美化表单不用愁2007-02-02
最新评论