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 相关文章推荐
js实现图片放大缩小功能后进行复杂排序的方法
Nov 08 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
javascript实现限制上传文件大小
Feb 06 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
jQuery Validate验证框架经典大全
Sep 23 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
jQuery通过deferred对象管理ajax异步
May 20 Javascript
Angular4学习笔记之新建项目的方法
Jul 18 Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
Jun 25 Javascript
js canvas实现5张图片合成一张图片
Jul 15 Javascript
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
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常用函数小技巧
2008/09/11 PHP
php 不同编码下的字符串长度区分
2009/09/26 PHP
Laravel下生成验证码的类
2017/11/15 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
jQuery之Deferred对象详解
2014/09/04 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
2015/04/21 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
2015/08/17 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
第二篇Bootstrap起步
2016/06/21 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
2017/01/17 Javascript
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
JQuery扩展对象方法操作示例
2018/08/21 jQuery
jQuery表单选择器用法详解
2019/08/22 jQuery
react基本安装与测试示例
2020/04/27 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
Python探索之SocketServer详解
2017/10/28 Python
python监控键盘输入实例代码
2018/02/09 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
Python 一键制作微信好友图片墙的方法
2019/05/16 Python
Python如何使用BeautifulSoup爬取网页信息
2019/11/26 Python
python urllib和urllib3知识点总结
2021/02/08 Python
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
全民健身日活动方案
2014/01/29 职场文书
2014年店长工作总结
2014/11/17 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
2015年村党支部工作总结
2015/04/30 职场文书
2015年财务经理工作总结
2015/05/13 职场文书
西安事变观后感
2015/06/12 职场文书
工商局调档介绍信
2015/10/22 职场文书