时间:2021-05-26
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方法。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
1.jquery通过ajax方法获取json数据不执行success回调问题描述:jquery通过ajax方法获取json数据不执行success回调方法问题原
本文实例讲述了jQuery实现异步获取json数据的2种方式,在web程序开发中非常具有实用价值。分享给大家供大家参考之用。具体方法如下:通常来说,jQuery
先上图:jquery.treeview数据通过JSON数据加载,有需要的朋友,可以通jquery的AJAX方法获取相关的JSON数据json的数据格式:{"id
这里可以找到json.js的代码,后面还需要formutil.js的代码及MD5.js用jquery解析JSON数据的方法,作为jquery异步请求的传输对象,
使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的;处理表单的数据可以用serializ