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 相关文章推荐
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 Javascript
javascript如何动态加载表格与动态添加表格行
Nov 27 Javascript
将字符串中由空格隔开的每个单词首字母大写
Apr 06 Javascript
jQuery实用函数用法总结
Aug 29 Javascript
js中的json对象详细介绍
Oct 29 Javascript
javascript实现动态导入js与css等静态资源文件的方法
Jul 25 Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
Vue 创建组件的两种方法小结(必看)
Feb 23 Javascript
微信小程序之判断页面滚动方向的示例代码
Aug 30 Javascript
关于vue项目中搜索节流的实现代码
Sep 17 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目录函数实现创建、读取目录教程实例
2011/01/13 PHP
PHP fopen 读取带中文URL地址的一点见解
2012/09/25 PHP
wamp下修改mysql访问密码的解决方法
2013/05/07 PHP
PHP生成不同颜色、不同大小的tag标签函数
2013/09/23 PHP
yii上传文件或图片实例
2014/04/01 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
常用的php图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
Laravel框架实现多数据库连接操作详解
2019/07/12 PHP
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
提高javascript效率 一次判断,而不要次次判断
2012/03/30 Javascript
javascript结合canvas实现图片旋转效果
2015/05/03 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
2016/06/07 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
Javascript中的this,bind和that使用实例
2019/12/05 Javascript
Python实现的数据结构与算法之基本搜索详解
2015/04/22 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
Django中提示消息messages的设置方式
2019/11/15 Python
详解Pycharm出现out of memory的终极解决方法
2020/03/03 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
英国哈罗德园艺:Harrod Horticultural
2020/03/31 全球购物
深圳-东方伟业笔试部分
2015/02/11 面试题
幼儿园园长岗位职责
2013/11/26 职场文书
我的网上商城创业计划书
2013/12/26 职场文书
幼儿教师培训感言
2014/03/08 职场文书
安全生产承诺书
2014/03/26 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
拓展训练激励口号
2014/06/17 职场文书
五一口号
2014/06/19 职场文书
影视后期实训报告
2014/11/05 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书