详解js中Json的语法与格式


Posted in Javascript onNovember 22, 2016

JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。

由于这种相似性,无需解析器,JavaScript 程序能够使用内建的 eval() 函数,用 JSON 数据来生成原生的 JavaScript 对象。

JSON语法规则:

数据在 名称/值 对仲
数据由逗号分隔
花括号保存对象
方括号保存数组

JSON 名称/值 对介绍

"name":"张飞",
"age":23

Json的值可以是:

数字(整数或浮点数)
字符串(要包括在双引号中)
逻辑值(true或false)
数组(在方括号中)
对象(在花括号中)

Json转javascript对象的方法为:

eval("(" + str + ")");

代码示例:

<html>
<head>
 <title>Json测试</title>
 <script src="/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
 <script type="text/javascript">
  //基本上,Json返回的要么是对象,要么是数组,如果单纯返回一个字符串,那么就没有必要用Json了,因此
  //Json基本就下面这些可,不过要注意双引号
  var str0 = "{employees:'测试'}";
  var obj0 = eval("(" + str0 + ")");
  alert(obj0.employees);   //输出测试

  var str = "{name:'张三',Age:21}";
  var obj = eval("(" + str + ")");
  document.write(obj.name + obj.Age); //输出 张三21
  alert(obj.name);

  //别看下面那段Json长,其实是一个对象,属性employees的值是一个对象数组。和上面的相比,只是name:张三 中的"张三"字符串 变成了对象数组而已
  var str2 = '{ "employees" : [' + '{ "firstName":"Bill" , "lastName":"Gates" },' + '{ "firstName":"George" , "lastName":"Bush" },' + '{ "firstName":"Thomas" , "lastName":"Carter" } ]}';
  var obj2 = eval("(" + str2 + ")");
  alert(obj2.employees[0].firstName);  //弹出 Bill

  var str3 = "[1,2,3,4,5,6]";    //json 数组
  var obj3 = eval("(" + str3 + ")");  //输出 2
  alert(obj3[1]);
 </script>
</head>
<body>
 <div id="div1">
 </div>
</body>
</html>

Json与JavaScript对象转换

  JSON转javascript对象

//Json转对象1
function JsonToObject(str) {
 return eval("(" + str + ")");
}

//Json转对象2 
function strToJson(str){
 var json = (new Function("return " + str))();
 return json;
}

//Json转对象3 jQuery工具函数
$.parseJSON()

  javascript对象转JSON

//javascript对象转Json
function ObjectToJson(o) {
 var arr = [];
 var fmt = function(s) {
  if (typeof s == 'object' && s != null) return json2str(s);
  return /^(string|number)$/.test(typeof s) ? "'" + s + "'" : s;
 }
 for (var i in o) arr.push("'" + i + "':" + fmt(o[i]));
 return '{' + arr.join(',') + '}';
}

以上就是本文的全部内容,希望对大家有所帮助,谢谢对三水点靠木的支持!

Javascript 相关文章推荐
超棒的javascript页面顶部卷动广告效果
Dec 01 Javascript
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
Jul 25 Javascript
JS获取url链接字符串 location.href
Dec 23 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
Apr 02 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
JavaScript中的splice方法用法详解
Jul 20 Javascript
详解如何去除vue项目中的#——History模式
Oct 13 Javascript
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
Apr 24 Javascript
js blob类型url的视频下载问题的解决
Nov 29 Javascript
浅谈vue项目,访问路径#号的问题
Aug 14 Javascript
AngularJS中一般函数参数传递用法分析
Nov 22 #Javascript
javascript入门之string对象【新手必看】
Nov 22 #Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 #Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 #Javascript
AngularJS变量及过滤器Filter用法分析
Nov 22 #Javascript
jQuery中$.grep() 过滤函数 数组过滤
Nov 22 #Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 #Javascript
You might like
星际争霸中的对战模式介绍
2020/03/04 星际争霸
随时给自己贴的图片加文字的php代码
2007/03/08 PHP
PHP清除字符串中所有无用标签的方法
2014/12/01 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
PHP+Oracle本地开发环境搭建方法详解
2019/04/01 PHP
laravel中的fillable和guarded属性详解
2019/10/23 PHP
js no-repeat写法 背景不重复
2009/03/18 Javascript
js 匿名调用实现代码
2009/06/19 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
2011/05/24 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
使用vue重构资讯页面的实例代码解析
2019/11/26 Javascript
JS数据类型判断的几种常用方法
2020/07/07 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
Caffe均值文件mean.binaryproto转mean.npy的方法
2018/07/09 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
python调用接口的4种方式代码实例
2019/11/19 Python
keras中的卷积层&amp;池化层的用法
2020/05/22 Python
北承题目(C++)
2012/05/16 面试题
和谐家庭演讲稿
2014/05/24 职场文书
新法人代表任命书
2014/06/06 职场文书
灵魂歌王观后感
2015/06/17 职场文书
2016七一建党节慰问信
2015/11/30 职场文书
GTX1650super好不好 gtx1650super显卡属于什么级别
2022/04/08 数码科技