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 相关文章推荐
JavaScript与DropDownList 区别分析
Jan 01 Javascript
Js获取事件对象代码
Aug 05 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
Nov 21 Javascript
基于jquery的时间段实现代码
Aug 02 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
Apr 28 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
May 07 Javascript
js比较两个单独的数组或对象是否相等的实例代码
Apr 28 Javascript
JS Ajax请求会话过期处理问题解决方法分析
Nov 16 Javascript
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
php4的彩蛋
2006/10/09 PHP
PHP字符转义相关函数小结(php下的转义字符串)
2007/04/12 PHP
使用PHP的日期与时间函数技巧
2008/04/24 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
2016/08/11 PHP
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
在网站上应该用的30个jQuery插件整理
2011/11/03 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
提示$ is not defined错误分析及解决
2013/04/09 Javascript
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
详解node中创建服务进程
2017/05/09 Javascript
在vue中封装可复用的组件方法
2018/03/01 Javascript
还不懂递归?读完这篇文章保证你会懂
2018/07/29 Javascript
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
vue与iframe之间的信息交互的实现
2020/04/08 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
2020/04/27 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
[00:14]护身甲盾
2019/03/06 DOTA
[02:29]大剑、皮鞭、女装,这届DOTA2勇士令状里都有
2020/07/17 DOTA
python通过opencv实现批量剪切图片
2017/11/13 Python
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
解决Firefox下不支持outerHTML问题代码分享
2014/06/04 HTML / CSS
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
Why we need EJB
2016/10/20 面试题
自动化专业职业生涯规划书范文
2014/01/16 职场文书
护理专业自我鉴定
2014/01/30 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技