jquery异步获取json数据($.getJSON方法与$.ajax方法)

发布时间:2020-09-09编辑:脚本学堂
有关jquery异步获取json数据的二种方式,分别采用$.getJSON方法与$.ajax方法取得异步数据,并追加到相关页面中,不了解的朋友参考下。

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>

如图:
jquery异步获取json数据

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方法。