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 相关文章推荐
使用jquery实现IE下按backspace相当于返回操作
Mar 18 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
May 07 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
May 24 Javascript
Bootstrap编写导航栏和登陆框
May 30 Javascript
js中常用的Tab切换效果(推荐)
Aug 30 Javascript
Bootstrap禁用响应式布局的实现方法
Mar 09 Javascript
Popup弹出框添加数据实现方法
Oct 27 Javascript
Vue 事件处理操作实例详解
Mar 05 Javascript
小程序中英文混合排序问题解决
Aug 02 Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 Javascript
JS document文档的简单操作完整示例
Jan 13 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 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在特殊字符前加斜杠的实现代码
2011/07/17 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
YII框架常用技巧总结
2019/04/27 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
深入理解javascript学习笔记(一) 编写高质量代码
2012/08/09 Javascript
jquery判断浏览器后退时候弹出消息的方法
2014/08/11 Javascript
jquery实现图片放大镜功能
2015/11/23 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
2016/03/18 Javascript
jQuery Mobile 和 Kendo UI 的比较
2016/05/05 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
浅谈vue中慎用style的scoped属性
2017/11/28 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
python实现音乐下载器
2018/04/15 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
基于Python 中函数的 收集参数 机制
2019/12/21 Python
python对Excel的读取的示例代码
2020/02/14 Python
Python调用shell命令常用方法(4种)
2020/05/11 Python
css3动画事件—webkitAnimationEnd与计时器time事件
2013/01/31 HTML / CSS
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
人民调解员培训方案
2014/06/05 职场文书
校庆标语集锦
2014/06/25 职场文书
2014年党员自我评议(5篇)
2014/09/12 职场文书
邀请函的格式
2015/01/30 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python