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

JavaScript eval() 函数

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

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

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

使用eval函数解析json

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


  1. var data="
  2. {
  3. root:
  4. [
  5. {name:'1',value:'0'},
  6. {name:'6101',value:'北京市'},
  7. {name:'6102',value:'天津市'},
  8. {name:'6103',value:'上海市'},
  9. {name:'6104',value:'重庆市'},
  10. {name:'6105',value:'渭南市'},
  11. {name:'6106',value:'延安市'},
  12. {name:'6107',value:'汉中市'},
  13. {name:'6108',value:'榆林市'},
  14. {name:'6109',value:'安康市'},
  15. {name:'6110',value:'商洛市'}
  16. ]
  17. }";

如果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. alert(eval("({})");// return object[Object]

这种写法,我们经常在js中可以看到:


  1. (function(){
  2. })(jQuery);  //做闭包操作

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

利用$.getJSON()方法

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

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


  1. $.getJSON("http://www.exp99.com/",{param:"USER_GUID"},function(data){
  2. //此处返回的data已经是json对象
  3. $.each(data.root,function(idx,item){
  4. if(idx==0){
  5. return true;//同continue,返回false同break
  6. }
  7. console.log("name:"+item.name+",value:"+item.value);
  8. });
  9. });

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

JS前端取得并解析后台服务器返回的JSON数据的方法的更多相关文章

  1. javascript解析从服务器返回的json格式数据

    在javascript中我们可以将服务器返回的json格式数据转换成json格式进行使用,如下: 1.服务器返回的json格式数据: 通过response.responseText获得: " ...

  2. 如何解析DELPHI XE5服务器返回的JSON数据(翻译)及中文乱码

    <span style="font-size:14px;">一直想找如何解析JSON数据的说,今天终于找到有人发帖子了.之前有人说用superobject,Tlkjso ...

  3. android菜鸟学习笔记25----与服务器端交互(二)解析服务端返回的json数据及使用一个开源组件请求服务端数据

    补充:关于PHP服务端可能出现的问题: 如果你刚好也像我一样,用php实现的服务端程序,采用的是apache服务器,那么虚拟主机的配置可能会影响到android应用的调试!! 在android应用中访 ...

  4. ajaxFileUpload上传文件成功后却无法解析服务器返回的json数据

    可能是应该返回内容带了标签,过滤下 var index=data.indexOf("<"); if (index!=-1){ data=data.substring(0,in ...

  5. 服务器返回的json数据中含有null的处理方法

    个人博客:http://guohuaden.com/2017/03/06/json-dataNull/因为有遇到过类似情况,所以就想到了一些解决方法,并且实践了一下,这里简单的做个记录. 注:有看到不 ...

  6. js如何解析后台传过来的json字符串

    1.js如何解析后台传过来的json字符串? 注意:js是无法直接接收和使用json或者Php的数据,用的话会出现undefined,所以要转换一下. 方式一: var str = '{"r ...

  7. .net mvc前台如何接收和解析后台的字典类型的数据 二分搜索算法 window.onunload中使用HTTP请求 网页关闭 OpenCvSharp尝试 简单爬虫

    .net mvc前台如何接收和解析后台的字典类型的数据   很久没有写博客了,最近做了一个公司门户网站的小项目,其中接触到了一些我不会的知识点,今日事情少,便记录一下,当时想在网上搜索相关的内容,但是 ...

  8. 【转】Jquery ajax方法解析返回的json数据

    转自http://blog.csdn.net/haiqiao_2010/article/details/12653555 最近在用jQuery的ajax方法传递接收json数据时发现一个问题,那就是返 ...

  9. struts2:JSON在struts中的应用(JSP页面中将对象转换为JSON字符串提交、JSP页面中获取后台Response返回的JSON对象)

    JSON主要创建如下两种数据对象: 由JSON格式字符串创建,转换成JavaScript的Object对象: 由JSON格式字符串创建,转换成JavaScript的List或数组链表对象. 更多关于J ...

随机推荐

  1. ambari-server启动报错500 status code received on GET method for API:/api/v1/stacks/HDP/versions/2.4/recommendations Error message : Server Error解决办法(图文详解)

    问题详情 来源是,我在Ambari集群里,安装Hue. 给Ambari集群里安装可视化分析利器工具Hue步骤(图文详解 所遇到的这个问题. 然后,去ambari-server的log日志,查看,如下 ...

  2. AngularJS开发最常犯的10个错误

    简介 AngularJS是目前最为活跃的Javascript框架之一,AngularJS的目标之一是简化开发过程,这使得AngularJS非常善于构建小型app原型,但AngularJS对于全功能的客 ...

  3. 用js的eval函数模拟Web API中的onclick事件

    在检查组内小伙伴提交的tabToggler插件的js代码时,发现了onclick的如下用法: el.onclick = function(){ //按钮样式切换 for(var i=0;i<ob ...

  4. 初识react native遇到的问题

    Andriod 使用react native时遇到的问题     打开现有项目报错: 从第一行Error可以知道是一个zip的压缩文件打不开,往下看应该是下载的Gradle文件有问题,提示也是让从新下 ...

  5. APP崩溃处理

    以前经常遇到APP内部异常情况下的Exception,最初是通过try catch这样的方式处理:但是APP上线后,用户在特地的情况下触发 了某些Exception,当然这些Exception从理论和 ...

  6. vue ---- Object的一些常用的方法

    在对象上添加新属性的几种方法: 直接附代码: 法一:Es6扩展运算符添加属性 法二:利用语法Object.assign(target, ...sources)    target目标对象.source ...

  7. 火狐加载用户配置文件 "C:\XXX\Mozilla Firefox\firefox.exe" http://192.168.1.1:8080 -profile ../kkk

    "C:\XXX\Mozilla Firefox\firefox.exe" http://192.168.1.1:8080 -profile ../kkk $("#clic ...

  8. dedecms部分文章出现读取附加信息出错的解决办法

    问题: 估计是新版本开发的时候,没有考虑旧版,文章内容为空的新闻,新版不在允许文章内容为空的新闻,这样旧版的内容为空的新闻升级后将无法再编辑. 解决:你可以对如下文件进行如下修改:article_ed ...

  9. caffe blob理解

    blob数据结构是caffe中基本的数据存储单元,它主要存储的数据是网络中的中间数据变量,比如各层的输入和输出:代价函数关于网络各层参数的梯度. blob中除了存储数据外,还有一些标记数据的参数,以下 ...

  10. 对比props

    1.在组件中data返回数组对象 2.在父级作用域中写入 (1)prop传值 <btn-grp :buttons="buttons"></btn-grp> ...