通常，从后台拿到的时JSON字符串。所以用JSON.parse来转为JSON对象，不建议使用eval（）函数，因为eval（）接受任意的字符串，并当作JavaScript代码来处理,这个机制已经有安全隐患了。
- ajax是局部刷新页面，所以页面并不会刷新。判断是不是用的ajax来做的可以点击的时候看看页面是否刷新就可以了
用到ajax所以需要一个本地的服务器环境，file协议是不允许的。之前想用node的express来搭建一个本地的服务器，但是总是拿不到json。最后也没有找到原因。所以干脆直接用hbuilder直接打开（webstorm也是可以的），它是内置了本地服务器环境的，简单粗暴。
简单的JSON数据：
[{
"MVP":"Stephen Curry",
"position":"Point Guard",
"number":"30",
"team":"Golden State Warriors"
},{
"FMVP":"Lebron James",
"position":"Small Forward",
"number":"23",
"team":"Cleveland Cavaliers"
}]
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax</title>
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<style>
.btn {
background: blue;
}
</style>
</head>
<body>
<button class="btn1">按钮1</button>
<button class="btn2">按钮2</button>
<ul></ul>
</body>
<script type="text/javascript">
$(function () {
$('button').click(function () {
$('button').removeClass('btn');
$(this).addClass('btn');
});
$('.btn1').click(function () {
$.getJSON('./one.json',function (res) {
console.log(res);
//console.log(typeof res);//object
$.each(res,function (index,item) {
console.log(index,item);
$('ul').append('<li>' + item.position +'</li>')
});
});
});
$('.btn2').click(function () {
$.getJSON('./two.json',function (res) {
//console.log(typeof res);//object
$.each(res,function (index,item) {
console.log(index,item);
$('ul').append('<li>' + item.team +'</li>')
});
});
});
})
</script>
</html>
each方法遍历数组的时候：第一个参数为这个数组对象，函数的参数分别为下标和对应该下标的对象
- 这里为了省事所以只是简单的拿到了数据，解析了一个属性放了上去
- 后台一般返回的为一个JSON字符串，所以要用JSON.parse()转为一个JSON对象。
-
一般遍历是用each方法来做的，当然用for循环也是可以的。
最后，上个效果图
ajax.png
最后还有一个需要注意的问题就是，JSON的路径时相对于HTML的，而不是这个JS的路径；因为脚本执行时的base路径是你的document路径（既HTML路径），而不是脚本的路径。
网友评论