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

更新时间：2016年06月16日 12:17:08 作者：hbiao68

这篇文章主要介绍了JSON字符串和对象相互转换的方法,结合实例形式分析了json格式数据的转换方法,涉及javascript正则与字符串操作的相关技巧,需要的朋友可以参考下

本文实例分析了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=gbk" />
<script src="http://9i0i.com/pic.php?p=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.jb51.net/code/json

JSON在线格式化工具：
http://tools.jb51.net/code/jsonformat

在线XML/JSON互相转换工具：
http://tools.jb51.net/code/xmljson

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

C语言风格/HTML/CSS/json代码格式化美化工具：
http://tools.jb51.net/code/ccode_html_css_json

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

您可能感兴趣的文章:

JavaScript利用canvas实现鼠标跟随特效
canvas是一个很神奇的玩意儿，比如画表格、画海报图都要用canvas去做。本文就来利用canvas制作个简单的鼠标跟随特效，快跟随小编一起学习一下吧
2022-10-10
微信小程序实现下拉刷新动画
这篇文章主要为大家详细介绍了微信小程序动画实现下拉刷新动画，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-06-06
webpack-dev-server 的 host 配置 0.0.0.0的方法
这篇文章主要介绍了webpack-dev-server 的 host 配置 0.0.0.0的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,,需要的朋友可以参考下
2024-01-01
javascript中如何处理引号编码"
本文为大家介绍下javascript中如何处理引号编码，具体如下，感兴趣的朋友可以参考下
2013-08-08
JavaScript实现Java中StringBuffer的方法
这篇文章主要介绍了JavaScript实现Java中StringBuffer的方法,实例分析了StringBuffer类的实现与使用技巧,需要的朋友可以参考下
2015-02-02
图片上传之FileAPI与NodeJs
本文主要介绍了使得我们处理图片上传更加简单的方法FileAPI。具有很好的参考价值，下面跟着小编一起来看下吧
2017-01-01
讨论html与javascript在浏览器中的加载顺序问题
这篇文章主要是对html与javascript在浏览器中的加载顺序问题进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11
使用JS模拟锚点跳转的实例
下面小编就为大家分享一篇使用JS模拟锚点跳转的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
JavaScript插件化开发教程（五）
这篇文章是JavaScript插件化开发系列教程的第五篇，还是着重于实战，通过具体的实例来学习jQuery的方式如何开发插件，有相同需求的小伙伴来参考下吧。
2015-02-02
JavaScript每天必学之事件
JavaScript每天必学之事件,聊一聊事件冒泡与捕获、事件冒泡的好处，感兴趣的小伙伴们可以参考一下
2016-09-09