第三次作业-前端与后台数据交换问题

Posted 2020-06-26

问题：JS前端取得并解析后台服务器返回的JSON数据方法有哪些？

前一段时间，我在做一个有关美食的Web App，很多商家的店铺信息以及一些用户评论信息等内容需要从后台来获取，如果仅仅只是静态布局的话就太过于死板，但是在进行前端与后端的数据交换时遇到不少问题，如题目JS前端取得并解析后台服务器返回的JSON数据的方法就是问题之一。

在解决这个问题之前，首先需要了解javascript eval()函数，eval(string)函数可计算某个字符串，并执行其中JavaScript代码。

JS前端取得并解析后台服务器返回的JSON数据的方法：

1.使用eval函数解析json

假设服务器返回的JSON字符串：

Var data=”

{root:

[{name:’1’,value:’0’},

 {name:’6101’,value:’北京市’},

 {name:’6101’,value:’天津市’},

 {name:’6101’,value:’上海市’},

 {name:’6101’,value:’重庆市’}

]}”;

如果jquery异步请求没做类型说明，或者以字符串方式接受，那么需要做一次对象化处理，即将该JSON字符串放于eval()中执行一次：

var dataObj=eval(“(“+data+”)”); //转换为json对象

注意：eval参数里面要写成”(“+data+”)”这种加圆括号的形式。加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语句（statement）来执行。

2.利用$.getJSON()方法

对于服务器返回的JSON字符串，如果jquery异步请求将type设为”json”，或者利用$.getJSON()方法获得服务器返回，那么就不需要eval()方法了，因为这时候得到的结果已经是json对象，只需直接调用该对象即可，如下：

$getJSON(“http://www.exp99.com/”,{param:”USER_GUID”},function(data){ //此处返回的data已经是json对象

$.each(data.root,function(idx,item){

if(idx==0){

return  ture;//同continue,返回false同break}

Console.log(“name:”+item.name+”,value:”+item.value);

});

});