详解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 相关文章推荐
关于B/S判断浏览器断开的问题讨论
Oct 29 Javascript
FileUpload上传图片(图片不变形)
Aug 05 Javascript
php和js对数据库图片进行等比缩放示例
Apr 28 Javascript
使用JavaScript链式编程实现模拟Jquery函数
Dec 21 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
May 12 Javascript
C++中的string类的用法小结
Aug 07 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
May 20 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
浅析Jquery操作select
Dec 13 Javascript
JavaScript中 DOM操作方法小结
Apr 25 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 Javascript
浅谈JSON5解决了JSON的两大痛点
Dec 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
php调用google接口生成二维码示例
2014/04/28 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
jQuery中data()方法用法实例
2014/12/27 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
vue中的计算属性的使用和vue实例的方法示例
2017/12/04 Javascript
Nodejs 和 Electron ubuntu下快速安装过程
2018/05/04 NodeJs
JavaScript中创建原子的方法总结
2018/08/26 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
JavaScript canvas实现跟随鼠标事件
2020/02/10 Javascript
python修改字典内key对应值的方法
2015/07/11 Python
深入理解Python装饰器
2016/07/27 Python
基于Python实现的ID3决策树功能示例
2018/01/02 Python
使用PM2+nginx部署python项目的方法示例
2018/11/07 Python
Pandas DataFrame 取一行数据会得到Series的方法
2018/11/10 Python
Python脚本完成post接口测试的实例
2018/12/17 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
django认证系统 Authentication使用详解
2019/07/22 Python
Python解析json时提示“string indices must be integers”问题解决方法
2019/07/31 Python
Python使用configparser库读取配置文件
2020/02/22 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
python中time包实例详解
2021/02/02 Python
利用CSS3的flexbox实现水平垂直居中与三列等高布局
2016/09/12 HTML / CSS
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
2012/12/31 HTML / CSS
Canvas实现保存图片到本地的示例代码
2018/06/28 HTML / CSS
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
大学生收银员求职信分享
2014/01/02 职场文书
2014年工程师工作总结
2014/11/25 职场文书
企业宣传稿范文
2015/07/23 职场文书
Python内置数据结构列表与元组示例详解
2021/08/04 Python
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫