jQuery异步获取json数据有2种方式，一个是$.getJSON方法，一个是$.ajax方法。本篇体验使用这2种方式异步获取json数据，然后追加到页面。
在根目录下创建data.json文件：
{
"one" : "Hello",
"two" : "World"
}
[b]■ 通过$.getJSON方法获取json数据[/b]
<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>
[img]http://files.jb51.net/file_images/article/201412/2014122214514435.png[/img]
[b]■ 通过$.ajax方法获取json数据[/b]
<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>
[b]总结：使用$.getJSON方法和$.ajax方法都能达到相同的效果，但是，如果想对异步获取的过程有更细节的控制，推荐使用$.ajax方法。[/b]
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
