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 相关文章推荐
PNG背景在不同浏览器下的应用
Jun 22 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
Mar 29 Javascript
在新窗口打开超链接的方法小结
Apr 14 Javascript
js操作css属性实现div层展开关闭效果的方法
May 11 Javascript
Javascript实现的Map集合工具类完整实例
Jul 31 Javascript
js实现显示当前状态的导航效果代码
Aug 28 Javascript
基于jquery实现简单的分页控件
Mar 17 Javascript
JQuery实现DIV其他动画效果的简单实例
Sep 18 Javascript
Angular ng-class详解及实例代码
Sep 19 Javascript
jquery对table做排序操作的实例演示
Aug 10 jQuery
vue异步axios获取的数据渲染到页面的方法
Aug 09 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 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
PHP stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
兼容PHP和Java的des加密解密代码分享
2014/06/26 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
php+js实现裁剪任意形状图片
2018/10/31 PHP
phpmyadmin在宝塔面板里进不去的解决方案
2020/07/06 PHP
js直接编辑当前cookie的脚本
2008/09/14 Javascript
js 文件引入实现代码
2010/04/23 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
jquery在IE、FF浏览器的差别详细探讨
2013/04/28 Javascript
ExtJS DOM元素操作经验分享
2013/08/28 Javascript
浅谈Javascript 执行顺序
2013/12/18 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
jQuery常用知识点总结以及平时封装常用函数
2016/02/23 Javascript
js代码延迟一定时间后执行一个函数的实例
2017/02/15 Javascript
最新Javascript程序员面试试题和解题方法
2017/11/23 Javascript
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
详解vue的数据劫持以及操作数组的坑
2019/04/18 Javascript
Python 实现使用dict 创建二维数据、DataFrame
2018/04/13 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
Python lambda表达式用法实例分析
2018/12/25 Python
Python 确定多项式拟合/回归的阶数实例
2018/12/29 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
租房协议书怎么写
2014/04/10 职场文书
航空学院求职信
2014/06/11 职场文书
业务员工作态度散漫检讨书
2014/11/02 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js
纯 CSS 自定义多行省略的问题(从原理到实现)
2021/11/11 HTML / CSS
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript