JS中JSON对象和String之间的互转及处理技巧


Posted in Javascript onApril 06, 2016

JSON:JavaScript 对象表示法(JavaScript Object Notation),其实JSON就是一个JavaScript的对象(Object)而已。

如有不清楚JSON,可以去w3cschool了解http://www.w3school.com.cn/json/

1.在javascript中新建一个字符串(JSON文本)。

var txt = '{ "employees" : [' +
'{ "firstName":"Bill" , "lastName":"Gates" },' +
'{ "firstName":"George" , "lastName":"Bush" },' +
'{ "firstName":"Thomas" , "lastName":"Carter" } ]}';

由于 JSON 语法是 JavaScript 语法的子集,JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。

eval() 函数使用的是 JavaScript 编译器,可解析 JSON 文本,然后生成 JavaScript 对象。必须把文本包围在括号中,这样才能避免语法错误:

var obj = eval ("(" + txt + ")");

注意:eval() 函数可编译并执行任何 JavaScript 代码。这隐藏了一个潜在的安全问题。

使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。JSON 解析器只能识别 JSON 文本,而不会编译脚本。

在浏览器中,这提供了原生的 JSON 支持,而且 JSON 解析器的速度更快。

较新的浏览器和最新的 ECMAScript (JavaScript) 标准中均包含了原生的对 JSON 的支持。

字符串转json对象:JSON.parse(jsonstr);

json对象转json字符串:JSON.stringify(jsonObj);

JQuery方法:

json字符串转json对象:jQuery.parseJSON(jsonStr);

<html>
<body>
<h2>通过 JSON 字符串来创建对象</h3>
<p>
First Name: <span id="fname"></span><br /> 
Last Name: <span id="lname"></span><br /> 
</p> 
<script type="text/javascript">
var txt = '{"employees":[' +
'{"firstName":"Bill","lastName":"Gates" },' +
'{"firstName":"George","lastName":"Bush" },' +
'{"firstName":"Thomas","lastName":"Carter" }]}';
obj = JSON.parse(txt);
document.getElementById("fname").innerHTML=obj.employees[1].firstName 
document.getElementById("lname").innerHTML=obj.employees[1].lastName 
</script>
</body>
</html>

2.那么如何遍历json数组呢?可以把它当成一个普通的javascript对象来处理。

<html>
<body>
<h2>如何遍历JSON数组</h3>
<div id="result"></div>
<script type="text/javascript">
var txt = '[{"firstName":"Bill","lastName":"Gates" },' +
'{"firstName":"George","lastName":"Bush" },' +
'{"firstName":"Thomas","lastName":"Carter" }]';
var arrayJson = JSON.parse(txt);
var html='';
for(var p in arrayJson){
html+=' firstName:'+arrayJson[p].firstName;
html+=' lastName'+arrayJson[p].lastName;
html+='<br />';
}
document.getElementById("result").innerHTML= html;
</script>
</body>
</html>

ie8(兼容模式),ie7和ie6没有JSON对象,不过http://www.json.org/js.html提 供了一个json.js,这样ie8(兼容模式),ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法;你可以在 https://github.com/douglascrockford/JSON-js上获取到这个js,一般现在用json2.js。

ie8(兼容模式),ie7和ie6可以使用eval()将字符串转为JSON对象,

var c='{"name":"Mike","sex":"女","age":"29"}';
var cToObj=eval("("+c+")");
alert(typeof(cToObj));

以上内容是针对JS中JSON对象和String之间的互转及处理技巧,希望对大家有所帮助。接下来给大家补充点知识JavaScript中String和JSON之间的转换。

下面给大家介绍w3c标准的浏览器(如火狐、chrome等)是有一个对象JSON(注意是大写)专门用来处理json的。这个对象有两个函数:

JSON.parse(text) //用于解析json;

JSON.stringify(object) //用于生成json格式;

早期的IE版本没有这个对象,可以去json的官方网站自行下载json2.js对付早期IE版本http://www.JSON.org

下面是之前的一些方法,现在可以弃用了

1.旧方法

function strToJson(str){ 
var json = eval('(' + str + ')'); 
return json; 
}

2.常用

function strToJson(str){ 
return (new Function("return " + str))(); 
}

3.IE不支持的方法

function strToJson(str){ 
return JSON.parse(str); 
}

4.jQuery方法

parseJSON: function( data ) { 
if ( typeof data !== "string" || !data ) { 
return null; 
} 
data = jQuery.trim( data ); 
if ( /^[\],:{}\s]*$/.test(data.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, "@") 
.replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, "]") 
.replace(/(?:^|:|,)(?:\s*\[)+/g, "")) ) { 
return window.JSON && window.JSON.parse ? 
window.JSON.parse( data ) : 
(new Function("return " + data))(); 
} else { 
jQuery.error( "Invalid JSON: " + data ); 
} 
},
Javascript 相关文章推荐
JS去掉第一个字符和最后一个字符的实现代码
Feb 20 Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 Javascript
Jquery中request和request.form和request.querystring的区别
Nov 26 Javascript
AngularJs Understanding the Controller Component
Sep 02 Javascript
jquery获取点击控件的绝对位置简单实例
Oct 13 Javascript
Javascript this 函数深入详解
Dec 13 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
layui中select,radio设置不生效的解决方法
Sep 05 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 Javascript
详细分析vue响应式原理
Jun 22 Javascript
vue实现下拉菜单树
Oct 22 Javascript
36个正则表达式(开发效率提高80%)
Nov 17 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 #Javascript
实例详解ECMAScript5中新增的Array方法
Apr 05 #Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 #Javascript
javascript中apply、call和bind的使用区别
Apr 05 #Javascript
JavaScript数组去重的两种方法推荐
Apr 05 #Javascript
jquery Deferred 快速解决异步回调的问题
Apr 05 #Javascript
JS模拟简易滚动条效果代码(附demo源码)
Apr 05 #Javascript
You might like
对淘宝URL中ID提取的PHP代码
2013/09/01 PHP
ThinkPHP跳转页success及error模板实例教程
2014/07/17 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
php文件上传、下载和删除示例
2020/08/28 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
JavaScript 动态创建VML的方法
2009/10/14 Javascript
JavaScript类和继承 prototype属性
2010/09/03 Javascript
关闭页面window.location事件未执行的原因及解决方法
2014/09/01 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
js实现自动轮换选项卡
2017/01/13 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
自己动手封装一个React Native多级联动
2018/09/19 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
[27:08]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第二场 11.21
2020/11/23 DOTA
centos下更新Python版本的步骤
2013/02/12 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
pyqt5 实现 下拉菜单 + 打开文件的示例代码
2019/06/20 Python
django 快速启动数据库客户端程序的方法示例
2019/08/16 Python
在pytorch中为Module和Tensor指定GPU的例子
2019/08/19 Python
详解Python IO口多路复用
2020/06/17 Python
Python列表推导式实现代码实例
2020/09/09 Python
亚洲独特体验旅游专家:eOasia
2018/08/15 全球购物
大学生优秀的自我评价分享
2013/10/22 职场文书
公司会议开幕词
2015/01/29 职场文书
2015年复活节活动总结
2015/02/27 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电