JSON字符串和对象相互转换实例分析


Posted in Javascript onJune 16, 2016

本文实例分析了JSON字符串和对象相互转换方法。分享给大家供大家参考,具体如下:

同事问了我一个问题——server端返回了一个json结构的字符串,怎么样去访问json对象里面的值?jquery有没有对返回的JSON数据进行解析?

我自己写了一个小的demo,还有从网上查了一些资料,在这里跟大家分享一下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(
  function(){
    var json = {"name":"Mike","sex":"女","age":29}; 
    alert(typeof json);
    var temp = obj2str(json);
    alert(temp);
    alert(typeof temp);
  }
);
//下面这个方法是将json对象转换为字符串
function obj2str(o){
 var r = [];
 if(typeof o =="string") return "\""+o.replace(/([\'\"\\])/g,"\\$1").replace(/(\n)/g,"\\n").replace(/(\r)/g,"\\r").replace(/(\t)/g,"\\t")+"\"";
 if(typeof o =="undefined") return "undefined";
 if(typeof o == "object"){
  if(o===null) return "null";
  else if(!o.sort){
   for(var i in o)
    r.push(i+":"+obj2str(o[i]))
   r="{"+r.join()+"}"
  }else{
   for(var i =0;i<o.length;i++)
    r.push(obj2str(o[i]))
   r="["+r.join()+"]"
  }
  return r;
 }
 return o.toString();
}
/*使用jquery插件,需要注意的是json的key-value必须都为字符串,即都需要使用双引号包起来,
不能使用单引号,如果value是数字就不需要用双引号包起来*/
function jquery_string_to_json(){
  var jsonString = '{"name":"huangbiao","sex":"boy","age":16}';
  //var jsonString = "{'name':'huangbiao','sex':'boy','age':16}";//错误的声明
  alert(typeof jsonString);
  var obj = jQuery.parseJSON(jsonString);
  alert(typeof obj);
}
/*使用eval方法对于字符串里面的key-value都必须使用双引号括起来,不能使用单引号,否则不
能够正常解析*/
function String_to_JSON(){
  var json = '{"name":"huangbiao","sex":"boy","age":16}';
  var temp = eval('('+json+')');//eval方法里面的括号是不能够少的,否则报脚本错误
  alert(typeof temp);
  alert(temp.name);
  //使用JSON对象只能在IE8以上的版本支持,因此不建议使用这种方式转换
  //var json = '{"name":"Mike","sex":"女","age":"29"}'; 
  //var temp = JSON.parse(json);
  //alert(temp.name);
}
</script>
<title>无标题文档</title>
</head>
<body>
</body>
</html>

在工作中发现server端传给前端JSON格式的字符串,使用eval("("+json+")");没有办法将得到的字符串转换为JSON对象,解决办法如下:

function obj2str(o){
 var r = [];
 if(typeof o =="string") return "\""+o.replace(/([\'\"\\])/g,"\\$1").replace(/(\n)/g,"\\n").replace(/(\r)/g,"\\r").replace(/(\t)/g,"\\t")+"\"";
 if(typeof o =="undefined") return "undefined";
 if(typeof o == "object"){
  if(o===null) return "null";
  else if(!o.sort){
   for(var i in o)
    r.push(i+":"+obj2str(o[i]))
   r="{"+r.join()+"}"
  }else{
   for(var i =0;i<o.length;i++)
    r.push(obj2str(o[i]))
   r="["+r.join()+"]"
  }
  return r;
 }
 return o.toString();
}
function json2obj(o){
  var result = obj2str(o);
  return eval("(" + result + ")");
}

调用json2obj(o)这个方法即可。

PS:这里再为大家推荐几款json在线工具,相信大家在今后的开发中可以用得到:

在线JSON代码检验、检验、美化、格式化工具:
http://tools.3water.com/code/json

JSON在线格式化工具:
http://tools.3water.com/code/jsonformat

在线XML/JSON互相转换工具:
http://tools.3water.com/code/xmljson

json代码在线格式化/美化/压缩/编辑/转换工具:
http://tools.3water.com/code/jsoncodeformat

C语言风格/HTML/CSS/json代码格式化美化工具:
http://tools.3water.com/code/ccode_html_css_json

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

Javascript 相关文章推荐
Span元素的width属性无效果原因及解决方案
Jan 15 Javascript
JavaScript:Div层拖动效果实例代码
Aug 06 Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 Javascript
JavaScript数值转换的三种方式总结
Jul 31 Javascript
javascript中mouseover、mouseout使用详解
Jul 19 Javascript
Javascript中常用类型的格式化方法小结
Dec 26 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 Javascript
vue组件Prop传递数据的实现示例
Aug 17 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
electron-vue利用webpack打包实现多页面的入口文件问题
May 12 Javascript
Jquery动态列功能完整实例
Aug 30 jQuery
jQuery的层级查找方式分析
Jun 16 #Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 #Javascript
JS中sort函数排序用法实例分析
Jun 16 #Javascript
JS原型对象的创建方法详解
Jun 16 #Javascript
JS使用单链表统计英语单词出现次数
Jun 16 #Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
Jun 16 #Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 #Javascript
You might like
用Socket发送电子邮件
2006/10/09 PHP
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
php中使用preg_replace函数匹配图片并加上链接的方法
2013/02/06 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
php注册登录系统简化版
2020/12/28 PHP
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
利用jquery写的左右轮播图特效
2014/02/12 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
2015/11/25 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
2015/11/30 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
2016/05/25 Javascript
javascript实现粘贴qq截图功能(clipboardData)
2016/05/29 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
vue基于mint-ui的城市选择3级联动的示例
2017/10/25 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
2017/12/18 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
2019/03/02 Javascript
Jquery的autocomplete插件用法及参数讲解
2019/03/12 jQuery
浅谈对于“不用setInterval,用setTimeout”的理解
2019/08/28 Javascript
js实现开关灯效果
2020/03/30 Javascript
vue前端和Django后端如何查询一定时间段内的数据
2021/02/28 Vue.js
Python实现图像几何变换
2015/07/06 Python
Python中列表和元组的使用方法和区别详解
2020/12/30 Python
python编写Logistic逻辑回归
2020/12/30 Python
django 通过url实现简单的权限控制的例子
2019/08/16 Python
OpenCV4.1.0+VS2017环境配置的方法步骤
2020/07/09 Python
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
外语系大学生自荐信范文
2014/03/01 职场文书
餐厅总厨求职信
2014/03/04 职场文书
奥运会口号
2014/06/13 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
2015年手术室工作总结
2015/05/11 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS