您可以使用以下JSON形式来表示User对象:
{"UserID":11, "Name":"Truly", "Email":"zhuleipro◎hotmail.com"};
然后如果把这一字符串赋予一个JavaScript变量,那么就可以直接使用对象的任一属性了。
完整代码:
<script> var User = {"UserID":11, "Name":"Truly", "Email":"zhuleipro◎hotmail.com"}; alert(User.Name); </script>
实际使用时可能更复杂一点,比如我们为Name定义更详细的结构,使它具有FirstName和LastName:
{"UserID":11, "Name":{"FirstName":"Truly","LastName":"Zhu"}, "Email":"zhuleipro◎hotmail.com"}
完整代码:
<script> var User = {"UserID":11, "Name":{"FirstName":"Truly","LastName":"Zhu"}, "Email":"zhuleipro◎hotmail.com"}; alert(User.Name.FirstName); </script>
现在我们增加一个新的需求,我们某个页面需要一个用户列表,而不仅仅是一个单一的用户信息,那么这里就需要创建一个用户列表数组。
下面代码演示了使用JSON形式定义这个用户列表:
[ {"UserID":11, "Name":{"FirstName":"Truly","LastName":"Zhu"}, "Email":"zhuleipro◎hotmail.com"}, {"UserID":12, "Name":{"FirstName":"Jeffrey","LastName":"Richter"}, "Email":"xxx◎xxx.com"}, {"UserID":13, "Name":{"FirstName":"Scott","LastName":"Gu"}, "Email":"xxx2◎xxx2.com"} ]
完整代码:
<script> var UserList = [ {"UserID":11, "Name":{"FirstName":"Truly","LastName":"Zhu"}, "Email":"zhuleipro◎hotmail.com"}, {"UserID":12, "Name":{"FirstName":"Jeffrey","LastName":"Richter"}, "Email":"xxx◎xxx.com"}, {"UserID":13, "Name":{"FirstName":"Scott","LastName":"Gu"}, "Email":"xxx2◎xxx2.com"} ]; alert(UserList[0].Name.FirstName); </script>
事实上除了使用"."引用属性外,我们还可以使用下面语句:
alert(UserList[0]["Name"]["FirstName"]); 或者 alert(UserList[0].Name["FirstName"]);
现在读者应该对JSON的使用有点认识了,归纳为以下几点:
小节
:
本文通过一个实例演示,初步了解了JSON 的强大用途。可以归结如下:
参考资料:
http://www.json.org/
原文来自:http://www.cnblogs.com/Truly/archive/2006/12/31/608896.html
相关推荐
深入浅出JSON 深入浅出JSON 深入浅出JSON 深入浅出JSON
JSON的用法,结合具体的实例,超详细的讲解
图文并茂,总共478页,高清,文字可复制,从原理的角度详细的讲解了ajax的基本用法,可以打下牢固的基础。另外也讲解了现在流程的json格式数据用法,异步编程,对象模型,xml,表单验证,详细讲解post请求。
Ext是一个很不错的Ajax框架,可以用来开发带有华丽外观的胖客户端应用,使得我们的b/s应用更加具有活力及生命力,提高用户体验。ExtJS是一个用javascript编写,与后台技术无关的前端ajax
这是根据黑马程序员中关于Vue11天课程中,跟着视频编写的代码,一行行跟着写出来的,连备注基本也是和视频一样,用的是...package.json里都有安装清单,http://vue.studyit.io/api这个地址不能用了,已经更换成新的地址
Elasticsearch 全部采用 JSON 接口,Logstash 是 Ruby DSL 设计,都是目前业界最通用的配置语法设计; 检索性能高效。虽然每次查询都是实时计算,但是优秀的设计和实现基本可以达到全天数据查询的秒级响应; 集群...
深入浅出Node.js 本仓库内容根据腾讯课堂 视频整理的学习笔记,视频教程讲的特别好,配合本仓库的代码测试环境来练习,学习效果更佳. 推荐大家按照目录结构的顺序进行学习,由浅入深,循序渐进,轻松学习 Node 如果觉得...
深入浅出Ajax(中文版)和其他深入浅出系列书籍一样,使用许多有趣的视觉刺激来保持我们大脑思考的兴奋。在您读完书中第一章后,不但能够掌握一个基于Ajax的简单应用程序开发,而且还能够了解怎样让一个混乱的项目走上...
IBMCloudant是一种基于jsondocument类型的非关系型(NoSQL)数据库,其具有在云端高效处理高负载、高并发读写的强大特性。从另一个角度来说,Cloudant 还是一个开源的、分布式的数据库,它基于Apache的CouchDB项目...
新建文件夹webpack->再在webpack下面新建demo->命令行切换到demo目录,使用npm init –yes 初始化项目的package.json文件,然后执行npm install webpack –save-dev 第二步、全局安装webpack(3.5.6版本): npm ...
是 《深入浅出Android--Google手持设备应用程序设计》中的完整BMI源代码,放在这是为了方便大家阅读,程序和书籍相对应,从而快速入门
课程以实际应用为导向,从基础...最后做前后端分离的项目开发,前端使用当下流利的Vue框架,跨域ajax请求与服务器交互数据,课程深入浅出,在该视频中没有任何废话,全程干货,只需要四天时间即可拿下SpringMVC框架。
Spring web mvc架构、springmvc入门程序、非注解处理器映射器和适配器、注解开发处理器映射器和适配器、springmvc整合Mybatis、RequestMapping...、springmvc上传图片、json数据交互、Validation、异常处理器、拦截器...
Struts2框架介绍、工作原理与架构分析、6大配置文件分析使用通配符定义action、动态方法调用,ActionContext及ServletActionContext...默认拦截器分析、自定义拦截器、OGNL表达式、值栈分析及操作、标签、 json使用。
内容概要:Python爬虫系列课程,共10个章节,深入浅出掌握Python爬虫的基础知识,了解爬虫实例,熟悉反爬机制,小的系列课程。 适合人群:基础小白入门系列,想了解Python爬虫基础知识的同学,属于入门级课程,可以...
前言 第一次听说jsonp,其实早在2年之前。当时在做一个活动页面的抽奖模块,要从服务端get一个概率,当时什么都不懂,同事说用ajax,我就用ajax,同事说...没关系,既然是深入浅出,那就从头说起。 假如我
本文尽可能的汇集了 Webpack2 中涉及路径的配置,力争深入浅出。 context context 是 webpack 编译时的基础目录,入口起点(entry)会相对于此目录查找。 默认值为当前目录,webpack设置 context 默认值代码 可以...
这是个MyEclipse的web工程 不需要数据库 ...有Ext官方自带的,<深入浅出ExtJS>一书的所有源码,73个Ext官方论坛收集的用户扩展控件。几个自己写的例子。 有任何问题可以找我 QQ:370735745 email:zhouli253@163.com
2深入浅出extJs例子 3自己写的例子 470过个插件 新增内容: 1通过dtree将所有例子搞成一颗树,方便大家观看效果 2新增dhtmlx上传文件 3新增EXT异步加载树 4动态修改树节点图标和提示层 5ext结合mxGraph作出流程图...