jquery异步获取json数据有2种方式:
一个是$.getJSON方法,一个是$.ajax方法。
异步获取json数据,然后追加到页面。
在根目录下创建data.json文件:
{
"one":"Hello",
"two":"World"
}
1、通过$.getJSON方法获取json数据:
<scriptsrc="Scripts/jquery-2.1.1.min.js"></script>
<scripttype="text/
javascript">
$(function(){
$.getJSON('data.json',function(data){
varitems=[];
$.each(data,function(key,val){
items.push('<liid="'+key+'">'+val+'</li>');
});
$('<ul/>',{
'class':'list',
html:items.join('')
}).appendTo('body');
});
});
</script>
如图:
2、通过$.ajax方法获取json数据
复制代码 代码示例:
<scriptsrc="Scripts/jquery-2.1.1.min.js"></script>
<scripttype="text/javascript">
$(function(){
$.ajax({
url:'data.json',
dataType:'json',
success:function(data){
varitems=[];
$.each(data,function(key,val){
items.push('<liid="'+key+'">'+val+'</li>');
});
$('<ul/>',{
'class':'list',
html:items.join('')
}).appendTo('body');
},
statusCode:{
404:function(){
alert("没有找到相关文件~~");
}
}
});
});
</script>
总结:
使用$.getJSON方法和$.ajax方法,效果相同。
若要对异步获取过程做进一步细节控制,可以使用$.ajax方法。