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 相关文章推荐
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
关于jquery css的使用介绍
Apr 18 Javascript
jQuery判断多个input file 都不能为空的例子
Jun 23 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
jquery实现简单的遮罩层
Jan 08 Javascript
js表单验证实例讲解
Mar 31 Javascript
去除字符串左右两边的空格(实现代码)
May 12 Javascript
无缝滚动的简单实现代码(推荐)
Jun 07 Javascript
微信小程序  网络请求API详解
Oct 25 Javascript
基于vue.js实现分页查询功能
Dec 29 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
vue+flask实现视频合成功能(拖拽上传)
Mar 04 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计算整个mysql数据库大小的方法
2015/06/19 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
PHP中“=&gt;
2019/03/01 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
php,js,css字符串截取的办法集锦
2014/09/26 Javascript
javascript实现日期按月份加减
2015/05/15 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
JS常用字符串方法(推荐)
2021/01/15 Javascript
js获取隐藏元素的宽高
2017/02/24 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
JS中原始值和引用值的储存方式示例详解
2018/03/23 Javascript
详解封装基础的angular4的request请求方法
2018/06/05 Javascript
vue的keep-alive用法技巧
2019/08/15 Javascript
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
vue样式穿透 ::v-deep的具体使用
2020/06/04 Javascript
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
Python制作CSDN免积分下载器
2015/03/10 Python
python自定义解析简单xml格式文件的方法
2015/05/11 Python
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
Django使用Celery异步任务队列的使用
2018/03/13 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
python K近邻算法的kd树实现
2018/09/06 Python
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
Django中使用Whoosh进行全文检索的方法
2019/03/31 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
用python中的matplotlib绘制方程图像代码
2019/11/21 Python
Python ATM功能实现代码实例
2020/03/19 Python
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
2013/08/11 HTML / CSS
党员岗位承诺口号大全
2014/03/28 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
2016猴年春节慰问信
2015/11/30 职场文书
德生TECSUN S-2000使用手册文字版
2022/05/10 无线电
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers