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 相关文章推荐
javascript indexOf函数使用说明
Jul 03 Javascript
javascript 框架小结 个人工作经验
Jun 13 Javascript
extjs3 combobox取value和text案例详解
Feb 06 Javascript
javascript制作坦克大战全纪录(1)
Nov 27 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
Jun 23 Javascript
创建一个类Person的简单实例
May 17 Javascript
Angular2 多级注入器详解及实例
Oct 30 Javascript
浅谈移动端之js touch事件 手势滑动事件
Nov 07 Javascript
JavaScript中的工厂函数(推荐)
Mar 08 Javascript
原生js编写2048小游戏
Mar 17 Javascript
JavaScript实现刮刮乐效果
Nov 01 Javascript
关于Vue中$refs的探索浅析
Nov 05 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原生函数一定好吗?
2014/12/08 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
2016/08/17 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
JS DOM 操作实现代码
2010/08/01 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
2016/07/14 Javascript
总结AngularJS开发者最常犯的十个错误
2016/08/31 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
2016/09/05 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
2017/07/24 Javascript
react 创建单例组件的方法
2018/04/26 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
js中arguments对象的深入理解
2019/05/14 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
JS制作简易计算器的实例代码
2020/07/04 Javascript
js实现跳一跳小游戏
2020/07/31 Javascript
在vue中使用vant TreeSelect分类选择组件操作
2020/11/02 Javascript
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
[01:02:38]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第二场 1月10日
2021/03/11 DOTA
Python实现CET查分的方法
2015/03/10 Python
利用python开发app实战的方法
2019/07/09 Python
在django中图片上传的格式校验及大小方法
2019/07/28 Python
python爬虫 Pyppeteer使用方法解析
2019/09/28 Python
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
银行会计职员个人的自我评价
2013/09/29 职场文书
单位实习证明怎么写
2014/01/17 职场文书
村庄环境整治方案
2014/05/15 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
岗位安全生产责任书
2014/07/28 职场文书
Python爬虫基础初探selenium
2021/05/31 Python
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python