JSON+JavaScript处理JSON的简单例子


Posted in Javascript onMarch 20, 2013

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)。这些特性使JSON成为理想的数据交换语言。

JSON建构于两种结构:

1、“名称/值”对的集合(A collection of name/value pairs)。不同的语言中,它被理解为对象(object),纪录(record),结构(struct),字典(dictionary),哈希表 (hash table),有键列表(keyed list),或者关联数组 (associative array)。

2、值的有序列表(An ordered list of values)。在大部分语言中,它被理解为数组(array)。

这些都是常见的数据结构。事实上大部分现代计算机语言都以某种形式支持它们。这使得一种数据格式在同样基于这些结构的编程语言之间交换成为可能。

JSON具有以下这些形式:

•对象是一个无序的“‘名称/值'对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值' 对”之间使用“,”(逗号)分隔。
•数组是值(value)的有序集合。一个数组以“[”(左中括号)开始,“]”(右中括号)结束。值之间使用“,”(逗号)分隔。
•值(value)可以是双引号括起来的字符串(string)、数值(number)、true、false、 null、对象(object)或者数组(array)。这些结构可以嵌套。
•字符串(string)是由双引号包围的任意数量Unicode字符的集合,使用反斜线转义。一个字符(character)即一个单独的字符串(character string)。
•字符串(string)与C或者Java的字符串非常相似。
•数值(number)也与C或者Java的数值非常相似。除去未曾使用的八进制与十六进制格式。除去一些编码细节。
•空白可以加入到任何符号之间。 以下描述了完整的语言。
JSON举例(javascript中使用json):

<script type="text/javascript">
var user = 
          {
            "Id":1,
            "Name":"Hubery",
            "Age":23,
            "Address":
              {
                  "City":"Beijing","ZipCode":"111111"
              },
            "Email":"hubery@3water.com"
          };          alert(user.Id);
          alert(user.Name);
          alert(user.Age);
          alert(user.Address.City);
          alert(user.Address.ZipCode);
          alert(user.Email);
</script>
下面我们把Address属性定义成数组,用户有两个Address:

<script type="text/javascript">
var user = 
          {
            "Id":1,
            "Name":"Hubery",
            "Age":23,
            "Address":
              [
                {"City":"Beijing","ZipCode":"111111"},
                {"City":"Langfang","ZipCode":"222222"}
              ],
            "Email":"hubery@3water.com"
          };
          alert(user.Id);
          alert(user.Name);
          alert(user.Age);
          alert(user.Address[0].City);//还可以这样:alert(user.Address[0]["City"]);
          alert(user.Address[0].ZipCode);
          alert(user.Address[1].City);
          alert(user.Address[1].ZipCode);
          alert(user.Email);
</script>

如果我们想要一个用户列表,能行吗?答案是,没问题!

<script type="text/javascript">
var user = 
          [
              {
                "Id":1,
                "Name":"Hubery",
                "Age":23,
                "Address":
                  [
                    {"City":"Beijing","ZipCode":"111111"},
                    {"City":"Langfang","ZipCode":"222222"}
                  ],
                "Email":"hubery@3water.com"
              },
              {
                "Id":2,
                "Name":"Chris",
                "Age":24,
                "Address":{"City":"Beijing","ZipCode":"100085"},
                "Email":"chris@3water.com"
              }
          ]          alert("Id: "+user[0].Id+"\r\nName: "+
          user[0].Name+"\r\nAge: "+
          user[0].Age+"\r\nAddress: ("+
          user[0].Address[0].City+","+user[0].Address[0].ZipCode+") ("+user[0].Address[1].City+","+user[0].Address[1].ZipCode+")\r\nEmail: "+
          user[0].Email);
          alert("Id: "+user[1].Id+"\r\nName: "+
          user[1].Name+"\r\nAge: "+
          user[1].Age+"\r\nAddress: ("+
          user[1].Address.City+","+user[1].Address.ZipCode+")\r\nEmail: "+
          user[1].Email);
</script>
Javascript 相关文章推荐
jquery validate在ie8下的bug解决方法
Nov 13 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
Jan 02 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
Oct 23 Javascript
AngularJS语法详解(续)
Jan 23 Javascript
Bootstrap每天必学之日期控制
Mar 07 Javascript
详解小程序原生使用ES7 async/await语法
Aug 06 Javascript
详解使用React制作一个模态框
Mar 14 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
Jun 29 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
Mar 02 Javascript
vue如何使用外部特殊字体的操作
Jul 30 Javascript
详解Node.JS模块 process
Aug 31 Javascript
js或者jquery判断图片是否加载完成实现代码
Mar 20 #Javascript
javascript 三种方法实现获得和设置以及移除元素属性
Mar 20 #Javascript
asp.net中System.Timers.Timer的使用方法
Mar 20 #Javascript
js控制的回到页面顶端goTop的代码实现
Mar 20 #Javascript
让图片旋转任意角度及JQuery插件使用介绍
Mar 20 #Javascript
jquery在Chrome下获取图片的长宽问题解决
Mar 20 #Javascript
javascript中[]和{}对象使用介绍
Mar 20 #Javascript
You might like
php更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
php构造函数的继承方法
2015/02/09 PHP
php利用ffmpeg提取视频中音频与视频画面的方法详解
2017/06/07 PHP
phpstudy2020搭建站点的实现示例
2020/10/30 PHP
php中get_object_vars()在数组的实例用法
2021/02/22 PHP
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
JS获取时间的方法
2015/01/21 Javascript
浅谈javascript的分号的使用
2015/05/12 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
jquery Deferred 快速解决异步回调的问题
2016/04/05 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
Python 代码性能优化技巧分享
2012/08/07 Python
对python 矩阵转置transpose的实例讲解
2018/04/17 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
wxpython绘制圆角窗体
2019/11/18 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
HTML5 新事件 小结
2009/07/16 HTML / CSS
职专应届生求职信
2013/11/16 职场文书
计算机专业优秀大学生自我总结
2014/01/21 职场文书
服务质量承诺书
2014/03/27 职场文书
小学师德师风整改措施
2014/10/27 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书
关于nginx 实现jira反向代理的问题
2021/09/25 Servers
Python 键盘事件详解
2021/11/11 Python