使用getJSON()
方法可以通过Ajax异步请求的方式,获取服务器中的数据,并对获取的数据进行解析,显示在页面中,它的调用格式为:
jQuery.getJSON(url,[data],[callback])
或$.getJSON(url,[data],[callback])
其中,url参数为请求加载json格式文件的服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数。
下面通过一个例子来说明:点击页面中的“加载”按钮,调用getJSON()
方法获取服务器中JSON格式文件中的数据,并遍历数据,将指定的字段名内容显示在页面中。
index.html页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.12.4.min.js"></script>
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">我最爱的运动</span>
<span class="fr">
<input id="btnShow" type="button" value="加载" />
</span>
</div>
<ul></ul>
</div>
<script type="text/javascript">
$(function(){
$("#btnShow").bind("click",function(){
var $this=$(this);
$.getJSON("sport.json",function(data){
$this.attr("disabled","true");
$.each(data,function(index,sport){
$("ul").append("<li>"+sport["name"]+"</li>");
});
})
});
});
</script>
</body>
</html>
sport.json页面:
[{"name":"足球"},{"name":"散步"},{"name":"篮球"},{"name":"乒乓球"},{"name":"骑自行车"}]
在本地服务器运行结果: