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 相关文章推荐
js实现iframe跨页面调用函数的方法
Dec 13 Javascript
javascript排序函数实现数字排序
Jun 26 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 Javascript
Bootstrap自定义文件上传下载样式
May 26 Javascript
JS中innerHTML和pasteHTML的区别实例分析
Jun 22 Javascript
基于vuejs实现一个todolist项目
Apr 11 Javascript
详解vue.js 开发环境搭建最简单攻略
Jun 12 Javascript
微信小程序实现根据字母选择城市功能
Aug 16 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
vue-cli的工程模板与构建工具详解
Sep 27 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
PHP4 与 MySQL 交互使用
2006/10/09 PHP
php模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
在phpstudy集成环境下的nginx服务器下配置url重写
2019/12/02 PHP
jQuery 定时局部刷新(setInterval)
2010/11/19 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
js常用数组操作方法简明总结
2014/06/20 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
Javascript的表单验证-初识正则表达式
2016/03/18 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
2016/07/21 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
AngularJS select设置默认值的实现方法
2017/08/25 Javascript
Vue精简版风格概述
2018/01/30 Javascript
nodejs读取并去重excel文件
2018/04/22 NodeJs
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
JS立即执行函数功能与用法分析
2019/01/15 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
2020/08/25 Javascript
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
书单|人生苦短,你还不用python!
2017/12/29 Python
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
详解python实现数据归一化处理的方式:(0,1)标准化
2019/07/17 Python
python2 对excel表格操作完整示例
2020/02/23 Python
Python数据可视化图实现过程详解
2020/06/12 Python
python要安装在哪个盘
2020/06/15 Python
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
2016/03/25 HTML / CSS
电子信息工程专业自荐书
2014/06/24 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
工作收入证明模板
2014/10/10 职场文书
护理培训心得体会
2016/01/22 职场文书
导游词之青岛崂山
2019/12/27 职场文书