详解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 相关文章推荐
载入进度条 效果
Jul 08 Javascript
js chrome浏览器判断代码
Mar 28 Javascript
jQuery学习笔记之jQuery的事件
Dec 22 Javascript
原始的js代码和jquery对比体会
Sep 10 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 Javascript
JavaScript数据结构与算法之栈与队列
Jan 29 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
js实现返回顶部效果
Mar 10 Javascript
VUE中的无限循环代码解析
Sep 22 Javascript
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
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实现修改新闻时删除图片的方法
2015/05/12 PHP
PHP生成器简单实例
2015/05/13 PHP
php 伪造HTTP_REFERER页面URL来源的三种方法
2016/09/22 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
jQuery中trigger()方法用法实例
2015/01/19 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
详解JS中Array对象扩展与String对象扩展
2016/01/07 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
2016/04/26 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
AngularJS日程表案例详解
2017/08/15 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
浅析vue插槽和作用域插槽的理解
2019/04/22 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
js设置鼠标悬停改变背景色实现详解
2019/06/26 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
Python 数据结构之堆栈实例代码
2017/01/22 Python
Python对多属性的重复数据去重实例
2018/04/18 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
python3中datetime库,time库以及pandas中的时间函数区别与详解
2020/04/16 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
用python制作个视频下载器
2021/02/01 Python
python中封包建立过程实例
2021/02/18 Python
打造完美自荐信
2014/01/24 职场文书
分公司任命书
2014/06/06 职场文书
2014年九一八事变演讲稿
2014/09/14 职场文书
英语感谢信范文
2015/01/20 职场文书
幼师大班个人总结
2015/02/13 职场文书
2015暑期社会实践通讯稿
2015/07/18 职场文书
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技