JSON教程 - 入门篇_H5之家 - 中国HTML5教程资源分享第一站

当前位置：创新互联 >> 常见问题 >> 前端开发 >> json教程 >> JSON教程 - 入门篇

JSON教程 - 入门篇

作者：创新互联文章来源：前端开发部点击数：更新时间：2009-11-30

这里假设我们需要创建一个User对象，并具有以下属性：用户ID ,用户名 ,用户Email
您可以使用以下JSON形式来表示User对象：
　　(1)分析
{"UserID":11, "Name":"Truly", "Email":""};然后如果把这一字符串赋予一个JavaScript变量，那么就可以直接使用对象的任一属性了。
完整代码:
<script>
   var User = {"UserID":147, "Name":"Truly", "Email":""};
   alert(User.UserID);//结果是147
   alert(User["Name"]);//结果是Truly --这是调用的两种方式
</script>
　　(2)分析
实际使用时可能更复杂一点，比如我们为Name定义更详细的结构，使它具有FirstName和LastName：
{"UserID":11, "Name":{"FirstName":"Truly","LastName":"Zhu"}, "Email":""}
完整代码:
<script>
var User = {"UserID":11, "Name":{"FirstName":"Truly","LastName":"Zhu"}, "Email":""};
alert(User.Name.FirstName);
alert(User["Name"]["FirstName"]); //结果是Truly --它们的效果是一样的
</script>
　　(3)分析
现在我们增加一个新的需求，我们某个页面需要一个用户列表，而不仅仅是一个单一的用户信息，那么这里就需要创建一个用户列表数组。
下面代码演示了使用JSON形式定义这个用户列表：
[
{"UserID":11, "Name":{"FirstName":"Truly","LastName":"Zhu"}, "Email":""},
{"UserID":12, "Name":{"FirstName":"Jeffrey","LastName":"Richter"}, "Email":""},
{"UserID":13, "Name":{"FirstName":"Scott","LastName":"Gu"}, "Email":""}
]
完整代码:
<script>
var UserList = [
   {"UserID":11, "Name":{"FirstName":"Truly","LastName":"Zhu"}, "Email":""},
   {"UserID":12, "Name":{"FirstName":"Jeffrey","LastName":"Richter"}, "Email":""},
   {"UserID":13, "Name":{"FirstName":"Scott","LastName":"Gu"}, "Email":""}
];
alert(UserList[0].Name.FirstName);
</script>
(1).对象是属性、值对的集合。一个对象的开始于“{”，结束于“}”。每一个属性名和值间用“:”提示，属性间用“,”分隔。
(2).数组是有顺序的值的集合。一个数组开始于"["，结束于"]"，值之间用","分隔。
(3).值可以是引号里的字符串、数字、true、false、null，也可以是对象或数组。这些结构都能嵌套。
(4).字符串和数字的定义和C或Java基本一致。
(5).JSON 提供了一种优秀的面向对象的方法，以便将元数据缓存到客户机上。
(6).JSON 帮助分离了验证数据和逻辑。
(7).JSON 帮助为 Web 应用程序提供了Ajax 的本质。

JS对象与JSON格式数据相互转换 :上一篇
什么是JSON ？ :下一篇

json教程相关文章

创新互联专业网站设计制作、网站建设、UI设计、网页设计。欢迎咨询400-028-6601 前端开发