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 相关文章推荐
ie和firefox不兼容的解决方法集合
Apr 28 Javascript
JS按字节截取字符长度实例
Nov 20 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
Apr 18 Javascript
Vue前端开发规范整理(推荐)
Apr 23 Javascript
学习JS中的DOM节点以及操作
Apr 30 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
Apr 28 Javascript
微信小程序wx.request拦截器使用详解
Jul 09 Javascript
微信小程序开发常见问题及解决方案
Jul 11 Javascript
原生js实现表格翻页和跳转
Sep 29 Javascript
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
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
php操作JSON格式数据的实现代码
2011/12/24 PHP
初品cakephp 入门基础
2012/02/16 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
node.js不得不说的12点内容
2014/07/14 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
Bootstrap基本样式学习笔记之标签(5)
2016/12/07 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
2020/08/06 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
Python中的左斜杠、右斜杠(正斜杠和反斜杠)
2016/08/30 Python
Python自定义主从分布式架构实例分析
2016/09/19 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
python isinstance函数用法详解
2020/02/13 Python
pytorch中的weight-initilzation用法
2020/06/24 Python
canvas仿写贝塞尔曲线的示例代码
2017/12/29 HTML / CSS
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
八皇后问题,输出了所有情况,不过有些结果只是旋转了90度
2016/08/15 面试题
求职简历推荐信范文
2013/12/02 职场文书
技术经理的自我评价范文
2013/12/03 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
机关党总支领导班子整改方案
2014/09/20 职场文书
三下乡个人总结
2015/03/04 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle