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 相关文章推荐
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
js模仿php中strtotime()与date()函数实现方法
Aug 11 Javascript
7个去伪存真的JavaScript面试题
Jan 07 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
jQuery事件用法详解
Oct 06 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 Javascript
详解vuejs之v-for列表渲染
Jun 22 Javascript
详谈JS中数组的迭代方法和归并方法
Aug 11 Javascript
jQuery中复合选择器简单用法示例
Mar 31 jQuery
bootstrap里bootstrap动态加载下拉框的实例讲解
Aug 10 Javascript
微信小程序动态添加view组件的实例代码
May 23 Javascript
使用AutoJs实现微信抢红包的代码
Dec 31 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
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/03/02 无线电
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
Nginx实现反向代理
2017/09/20 Servers
jquery获取div距离窗口和父级dv的距离示例
2013/10/10 Javascript
深入剖析JavaScript中的枚举功能
2014/03/06 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
JavaScript闭包实例详解
2016/06/03 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
2016/08/03 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
JS实现仿百度文库评分功能
2017/01/12 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
jQuery返回定位插件详解
2017/05/15 jQuery
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
js/jQuery实现全选效果
2019/06/17 jQuery
js代码实现轮播图
2020/05/04 Javascript
解决vue scoped html样式无效的问题
2020/10/24 Javascript
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25
2020/11/26 DOTA
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
django开发教程之利用缓存文件进行页面缓存的方法
2017/11/10 Python
Laravel框架表单验证格式化输出的方法
2019/09/25 Python
python实现视频读取和转化图片
2019/12/10 Python
python和node.js生成当前时间戳的示例
2020/09/29 Python
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
端午节活动策划方案
2014/03/09 职场文书
公司办公室岗位职责
2014/03/19 职场文书
党的群众路线学习材料
2014/05/16 职场文书
建筑学专业自荐书
2014/07/09 职场文书
运动会通讯稿200字
2015/07/20 职场文书
python基础入门之普通操作与函数(三)
2021/06/13 Python
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP