ajax请求json交互,ajax请求JSON数据并解析

通常，从后台拿到的时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代码：

ajax

.btn {

background: blue;

}

按钮1

按钮2

$(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('

' + item.position +'')

});

});

});

$('.btn2').click(function () {

$.getJSON('./two.json',function (res) {

//console.log(typeof res);//object

$.each(res,function (index,item) {

console.log(index,item);

$('ul').append('

' + item.team +'')

});

});

});

})

each方法遍历数组的时候：第一个参数为这个数组对象，函数的参数分别为下标和对应该下标的对象

这里为了省事所以只是简单的拿到了数据，解析了一个属性放了上去

后台一般返回的为一个JSON字符串，所以要用JSON.parse()转为一个JSON对象。

一般遍历是用each方法来做的，当然用for循环也是可以的。

最后，上个效果图

ajax.png

最后还有一个需要注意的问题就是，JSON的路径时相对于HTML的，而不是这个JS的路径；因为脚本执行时的base路径是你的document路径(既HTML路径)，而不是脚本的路径。