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的执行顺序 之实战篇
Mar 03 Javascript
asm.js使用示例代码
Nov 28 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 Javascript
JS实现很实用的对联广告代码(可自适应高度)
Sep 18 Javascript
Vue.js每天必学之过渡与动画
Sep 06 Javascript
js实现右键自定义菜单
Dec 03 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 Javascript
webpack配置文件和常用配置项介绍
Apr 28 Javascript
原生JS实现图片懒加载之页面性能优化
Apr 26 Javascript
详解如何探测小程序返回到webview页面
May 14 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
Feb 15 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加密解密的代码
2007/07/16 PHP
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
基于jQuery的左右滚动实现代码
2010/12/03 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
2013/12/12 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
关闭页面window.location事件未执行的原因及解决方法
2014/09/01 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
2017/06/09 jQuery
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
详解Puppeteer 入门教程
2018/05/09 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
详解Vite的新体验
2021/02/22 Javascript
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
pandas数据集的端到端处理
2019/02/18 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
django foreignkey(外键)的实现
2019/07/29 Python
python实现canny边缘检测
2020/09/14 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
文秘专业自荐信
2013/10/14 职场文书
业务主管岗位职责范本
2013/12/25 职场文书
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
日化店促销方案
2014/03/26 职场文书
尊老爱亲美德少年事迹材料
2014/08/14 职场文书
给学校的建议书400字
2015/09/14 职场文书
2016银行求职自荐信
2016/01/28 职场文书
Python3接口性能测试实例代码
2021/06/20 Python
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS