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 相关文章推荐
javascript高亮效果的二种实现方法
Sep 14 Javascript
JavaScript的变量作用域深入理解
Oct 25 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
Dec 06 Javascript
jquery制作弹窗提示窗口代码分享
Mar 02 Javascript
JS简单计算器实例
Jan 20 Javascript
通过BootStrap实现轮播图的实际应用
Sep 26 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
Vue Router的懒加载路径的解决方法
Jun 21 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
Apr 16 Javascript
使用Vue 实现滑动验证码功能
Jun 27 Javascript
es6函数之尾调用优化实例分析
Apr 25 Javascript
低门槛开发iOS、Android、小程序应用的前端框架详解
Oct 16 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
星际争霸任务指南——虫族
2020/03/04 星际争霸
一个简单的MySQL数据浏览器
2006/10/09 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
2007/04/21 Javascript
Javascript中的相等与不等运算
2010/04/25 Javascript
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
2013/04/11 Javascript
js 调用父窗口的具体实现代码
2013/07/15 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
javascript简单实现命名空间效果
2014/03/06 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
深入理解逻辑表达式的用法 与或非的用法
2016/06/06 Javascript
原生JS实现导航下拉菜单效果
2020/11/25 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
2018/01/12 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
使用javascript做时间倒数读秒功能的实例
2019/01/23 Javascript
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
python实现的登录和操作开心网脚本分享
2014/07/09 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
pyqt5中动画的使用详解
2020/04/01 Python
OpenCV4.1.0+VS2017环境配置的方法步骤
2020/07/09 Python
基于python模拟bfs和dfs代码实例
2020/11/19 Python
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
大学生演讲稿
2014/04/25 职场文书
爱我中华教学反思
2014/04/28 职场文书
研究生导师评语
2014/12/31 职场文书
新员工入职欢迎词
2015/01/23 职场文书
《叶问2》观后感
2015/06/15 职场文书
太空授课观后感
2015/06/17 职场文书
单位领导婚礼致辞
2015/07/28 职场文书
PHP获取学生成绩的方法
2021/11/17 PHP
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android