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 nextSibling 与 getNextElement(node) 使用介绍
Oct 13 Javascript
html文档中的location对象属性理解及常见的用法
Aug 13 Javascript
javascript中Array数组的迭代方法实例分析
Feb 04 Javascript
jQuery对JSON数据进行排序输出的方法
Jun 24 Javascript
jquery validate demo 基础
Oct 29 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
Jul 14 Javascript
JavaScript简单获取系统当前时间完整示例
Aug 02 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
Sep 23 Javascript
vuejs父子组件之间数据交互详解
Aug 09 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 Javascript
Vue中keep-alive组件的深入理解
Aug 23 Javascript
JavaScript Dom实现轮播图原理和实例
Feb 19 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分页思路以及在ZF中的使用
2012/05/30 PHP
PHP实现通用alert函数的方法
2015/03/11 PHP
php获取错误信息的方法
2015/07/17 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
event对象的方法 兼容多浏览器
2009/06/27 Javascript
js获取和设置属性的方法
2014/02/20 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
基于JavaScript的操作系统你听说过吗?
2016/01/28 Javascript
jQuery获取checkbox选中的值
2016/01/28 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
js实现图片上传到服务器和回显
2020/01/19 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
[01:01:35]Optic vs paiN 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python网络编程学习笔记(八):XML生成与解析(DOM、ElementTree)
2014/06/09 Python
Python的Django框架中的URL配置与松耦合
2015/07/15 Python
使用Python神器对付12306变态验证码
2016/01/05 Python
python中的文件打开与关闭操作命令介绍
2018/04/26 Python
Python地图绘制实操详解
2019/03/04 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
python入门之基础语法学习笔记
2020/02/08 Python
利用Python计算KS的实例详解
2020/03/03 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
CSS3 transform的skew属性值图文详解
2014/07/21 HTML / CSS
CSS3动画特效在活动页中的应用
2020/01/21 HTML / CSS
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
2017/08/24 HTML / CSS
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
医药工作者的求职信范文
2013/09/21 职场文书
上班玩游戏检讨书
2014/02/07 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
二年级学生期末评语
2014/12/26 职场文书
美丽的大脚观后感
2015/06/03 职场文书