JavaScript转换与解析JSON方法实例详解


Posted in Javascript onNovember 24, 2015

本文实例讲述了JavaScript转换与解析JSON方法。分享给大家供大家参考,具体如下:

json格式数据如下:

var json = { 'jquery': [{ "id": "1", "type": "ASP.NET", "title": "JSON全解析"}] }
    alert(json.jquery[0].id);
    alert(json.jquery[0].type);
    alert(json.jquery[0].title);

javascript解析json数据:

window.onload = function() {
 var json = { "China": "[{'City':'上海','value':'1'},{'City':'南京','value':'2'},{'City':'杭州','value':'3'},{'City':'武汉','value':'4'}]" }
 var datas = eval(json.China);
 for (var i = 0; i < datas.length; i++) 
 {
  alert(datas[i].City);
  alert(datas[i].value);
 }
}

补充:jQuery解析json方法:

使用eval函数来解析,jquery的each方法来遍历

用JQuery解析JSON数据的方法,作为JQuery异步请求的传输对象,JQuery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里不再做说明。

这里首先给出JSON字符串集,字符串集如下:

var data=" 
{ 
root: 
[ 
  {name:'1',value:'0'}, 
  {name:'6101',value:'北京市'}, 
  {name:'6102',value:'天津市'}, 
  {name:'6103',value:'上海市'}, 
  {name:'6104',value:'重庆市'}, 
]
}";

这里以JQuery异步获取的数据类型——json对象和字符串为依据,分别介绍两种方式获取到的结果处理方式。

eval()

对于服务器返回的JSON字符串,如果jquery异步请求没做类型说明,或者以字符串方式接受,那么需要做一次对象化处理,方式不是太麻烦,就是将该字符串放于eval()中执行一次。这种方式也适合以普通javascipt方式获取json对象,以下举例说明:

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

为什么要 eval这里要添加 ("("+data+")"); 呢?

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

加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式(expression)转化为对象,而不是作为语句(statement)来执行。举一个例子,例如对象字面量{},如若不加外层的括号,那么eval会将大括号识别为JavaScript代码块的开始和结束标记,那么{}将会被认为是执行了一句空语句。所以下面两个执行结果是不同的:

// return undefined
alert(eval("{}"); 
// return object[Object]
alert(eval("({})");

对于这种写法,在JS中,可以到处看到。如: (function()) {}(); 做闭包操作时等。

//输出root的子对象数量 
alert(dataObj.root.length);
$.each(dataObj.root,fucntion(idx,item){ 
  if(idx==0){ 
    return true; 
  } 
  //输出每个root子对象的名称和值 
  alert("name:"+item.name+",value:"+item.value); 
})

对于一般的js生成json对象,只需要将$.each()方法替换为for语句即可,其他不变。

服务器返回的JSON字符串

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

$.getJSON("http://www.xxxx.com/",{param:"gaoyusi"},function(data){ 
  //此处返回的data已经是json对象 
  //以下其他操作同第一种情况 
  $.each(data.root,function(idx,item){ 
    if(idx==0){ 
      //同countinue,返回false同break 
      return true;
    } 
    alert("name:"+item.name+",value:"+item.value); 
  }); 
});

这里特别需要注意的是方式1中的eval()方法是动态执行其中字符串(可能是js脚本)的,这样很容易会造成系统的安全问题。所以可以采用一些规避了eval()的第三方客户端脚本库,比如JSON in JavaScript就提供了一个不超过3k的脚本库。

第二种解析方式就是使用Function对象来完成,它的典型应用就是在JQuery中的AJAX方法下的success等对于返回数据data的解析。

var json='{"name":"CJ","age":18}';
data =(new Function("","return "+json))();

此时的data就是一个会解析成一个json对象了。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js 加载并解析XML字符串的代码
Dec 13 Javascript
jquery+ajax实现跨域请求的方法
Jan 20 Javascript
学习JavaScript设计模式之装饰者模式
Jan 19 Javascript
jQuery实现右键菜单、遮罩等效果代码
Sep 27 Javascript
react native带索引的城市列表组件的实例代码
Aug 08 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
Mar 02 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
May 17 Javascript
详解如何在你的Vue项目配置vux
Jun 04 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
Jul 13 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 Javascript
原生javascript中this几种常见用法总结
Feb 24 Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 Javascript
jQuery实现带分组数据的Table表头排序实例分析
Nov 24 #Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 #Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 #Javascript
基于jquery实现日历签到功能
Sep 11 #Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 #Javascript
如何解决ligerUI布局时Center中的Tab高度大小
Nov 24 #Javascript
JS实现图片高亮展示效果实例
Nov 24 #Javascript
You might like
获取远程文件大小的php函数
2010/01/11 PHP
Codeigniter(CI)框架分页函数及相关知识
2014/11/03 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
详解php设置session(过期、失效、有效期)
2015/11/12 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
2017/12/04 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
js实现tab栏切换效果
2020/08/02 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
python安装以及IDE的配置教程
2015/04/29 Python
Python的string模块中的Template类字符串模板用法
2016/06/27 Python
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
对DataFrame数据中的重复行,利用groupby累加合并的方法详解
2019/01/30 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
Python HTTP下载文件并显示下载进度条功能的实现
2020/04/02 Python
Bibloo荷兰:女士、男士和儿童的服装、鞋子和配饰
2019/02/25 全球购物
描述RIP和OSPF区别以及特点
2015/01/17 面试题
C#里面可以避免一个类被其他类继承么?如何?
2013/09/26 面试题
加拿大留学自荐信
2014/01/28 职场文书
《狮子和兔子》教学反思
2014/03/02 职场文书
设计专业毕业生求职信
2014/06/25 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
三年级学生评语大全
2014/12/26 职场文书
煤矿安全保证书
2015/02/27 职场文书
2015年煤矿工作总结
2015/04/28 职场文书
中学社团活动总结
2015/05/07 职场文书
中学校园广播稿
2015/08/18 职场文书
python 常用的异步框架汇总整理
2021/06/18 Python