很多情况下,我们的页面需要Ajax请求json数据生成内容。使用jQuery的 ajax() 方法请求数据时,语法如下:
$.ajax({name:value, name:value, ... })
示例如下:
本地json内容为:
{
"list":[
{
"manage":[
{"tool":"查询工具"},
{"tool":"管理工具"}
]
}
]
}
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax请求本地json文件</title>
</head>
<body>
<div id="test"></div>
<script src="jquery-2.2.1.min.js"></script>
<script>
$(function(){
$.ajax({
//请求方式
type:"GET",
//文件位置
url:"json_data.json",
//返回数据格式为json,也可以是其他格式如
dataType: "json",
//请求成功后要执行的函数,拼接html
success: function(data){
var str="<ul>";
$.each(data.list[0].manage,function(i,n){
str+="<li>"+n.tool+"</li>";
});
str+="</ul>";
$("div").append(str);
}
});
});
</script>
</body>
</html>
得出结果:
- 查询工具
- 管理工具
ajax请求成功,值得一提的是 each() 方法中,的两个参数,第一个是数组对象,由于我的json树内容有两层,一开始误用成
data.list.manage导致出错,这种小失误值得警惕。第二个参数是call调用的函数,在这里传入的 i 和 n 分别代表元素在数组的位置和元素值。遍历json元素时可以用“.”获取相应的的值,如此时的 n.tool 。