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 11 Javascript
JS俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
兼容IE和FF的图片上传前预览js代码
May 28 Javascript
判断日期是否能跨月查询的js代码
Jul 25 Javascript
理解jQuery stop()方法
Nov 21 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
Bootstrap响应式侧边栏改进版
Sep 17 Javascript
vue-resource拦截器设置头信息的实例
Oct 27 Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 Javascript
vue-cli系列之vue-cli-service整体架构浅析
Jan 14 Javascript
Vue中使用matomo进行访问流量统计的实现
Nov 05 Javascript
解决vue 表格table列求和的问题
Nov 06 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
一个显示天气预报的程序
2006/10/09 PHP
PHP读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
php的curl封装类用法实例
2014/11/07 PHP
Symfony2中被遗弃的getRequest()方法分析
2016/03/17 PHP
jquery validate使用攻略 第四步
2010/07/01 Javascript
apycom出品的jQuery精美菜单破解方法
2011/02/18 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
jquery 滚动条事件简单实例
2013/07/12 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
2018/01/08 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
在vue中实现给每个页面顶部设置title
2020/07/29 Javascript
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
python requests使用socks5的例子
2019/07/25 Python
python多线程使用方法实例详解
2019/12/30 Python
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
HTML5实现移动端弹幕动画效果
2019/08/01 HTML / CSS
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
介绍一下Make? 为什么使用make
2016/07/31 面试题
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
群众路线剖析材料
2014/02/02 职场文书
实习评语大全
2014/04/26 职场文书
2014年世界艾滋病日宣传活动总结
2014/11/18 职场文书
小学新教师个人总结
2015/02/05 职场文书
质检员岗位职责范本
2015/04/07 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python