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

时间：2021-11-25 05:14:10

摘要：主要介绍：使用eval函数解析JSON数据；$.getJSON()方法获得服务器返回的JSON数据

JavaScript eval() 函数

eval(string) 函数可计算某个字符串，并执行其中的的 JavaScript 代码。

参数string：要计算的字符串，其中含有要计算的 JavaScript 表达式或要执行的语句。

该方法只接受原始字符串作为参数，如果 string 参数不是原始字符串，那么该方法将不作任何改变地返回。因此请不要为 eval() 函数传递 String 对象来作为参数。

使用eval函数解析json

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



    

  1. var data="
    2. 

  2. {
    3. 

  3. root:
    4. 

  4. [
    5. 

  5. {name:'1',value:'0'},
    6. 

  6. {name:'6101',value:'北京市'},
    7. 

  7. {name:'6102',value:'天津市'},
    8. 

  8. {name:'6103',value:'上海市'},
    9. 

  9. {name:'6104',value:'重庆市'},
    10. 

  10. {name:'6105',value:'渭南市'},
    11. 

  11. {name:'6106',value:'延安市'},
    12. 

  12. {name:'6107',value:'汉中市'},
    13. 

  13. {name:'6108',value:'榆林市'},
    14. 

  14. {name:'6109',value:'安康市'},
    15. 

  15. {name:'6110',value:'商洛市'}
    16. 

  16. ]
    17. 

  17. }";
    18. 



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




  1. var dataObj=eval("("+data+")");//转换为json对象


可能你已经注意到啦，为什么eval参数里面要写成"("+data+")"这种加圆括号的形式？


原因：


前面我们提到了，eval()函数可以执行参数里的表达式！


由于json是以”{}”的方式来开始以及结束的，在JS中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。


加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语句（statement）来执行。


举一个例子，例如对象字面量{}，如若不加外层的括号，那么eval会将大括号识别为JavaScript代码块的开始和结束标记，那么{}将会被认为是执行了一句空语句。所以下面两个执行结果是不同的：




    

  1. alert(eval("{}"); // return undefined
    2. 

  2. alert(eval("({})");// return object[Object]
    3. 



这种写法，我们经常在js中可以看到：




    

  1. (function(){
    2. 

  2. })(jQuery);  //做闭包操作
    3. 



闭包就是将函数内部和函数外部连接起来的一座桥梁！


利用$.getJSON()方法


提示：虽然 eval() 的功能非常强大，但在实际使用中用到它的情况并不多。


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




    

  1. $.getJSON("http://www.exp99.com/",{param:"USER_GUID"},function(data){
    2. 

  2. //此处返回的data已经是json对象
    3. 

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

  4. if(idx==0){
    5. 

  5. return true;//同continue，返回false同break
    6. 

  6. }
    7. 

  7. console.log("name:"+item.name+",value:"+item.value);
    8. 

  8. });
    9. 

  9. });
    10. 



转载来自：http://www.exp99.com/f2e/qianduankaifa_77.html


相关文章