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 相关文章推荐
QQ登录简单实现代码
Mar 09 Javascript
Javascript document.referrer判断访客来源网址
May 15 Javascript
node.js中的fs.symlink方法使用说明
Dec 15 Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
Jul 07 Javascript
微信小程序 弹窗自定义实例代码
Mar 08 Javascript
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
微信小程序之前台循环数据绑定
Aug 18 Javascript
详解如何去除vue项目中的#——History模式
Oct 13 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
Dec 03 Javascript
angular6 填坑之sdk的方法
Dec 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
php 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
ThinkPHP分页实例
2014/10/15 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
PHP中Cookie的使用详解(简单易懂)
2017/04/28 PHP
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
浅析js绑定事件的常用方法
2016/05/15 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
Web安全测试之XSS实例讲解
2016/08/15 Javascript
Bootstrap基本组件学习笔记之进度条(15)
2016/12/08 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
jQuery封装animate.css的实例
2018/01/04 jQuery
Vue-cli项目获取本地json文件数据的实例
2018/03/07 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
2019/05/07 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
Python中特殊函数集锦
2015/07/27 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
Python3.6日志Logging模块简单用法示例
2018/06/14 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
python字典与json转换的方法总结
2020/12/28 Python
html5移动端自适应布局的实现
2020/04/15 HTML / CSS
圣彼得堡鲜花配送:Semicvetic
2020/09/15 全球购物
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
百货商场楼层班组长竞聘书
2014/03/31 职场文书
学雷锋活动总结范文
2014/04/25 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS