目录
上机练习 4——在 Ajax 中使用 JSON 生成管理员新闻页面
上机练习 5 ——在 Ajax 中使用 JSON 生成主题管理页面
任务3:使用原生 JSON 格式构建响应数据
在前面的 Ajax 实现中,服务器响应的内容是一些简单的文本,对于更多应用而言
这是远远不够的。列如,电商网站中动态加载商品评论,电子邮件 Web 客户端动态加
载邮件列表等,这就需要用到一些结构化的数据表示方式,如前文提到的 JSON。
6.3.1 认识 JSON
JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。它是基于
JavaScript 的一个子集,采用完全独立于语言的文本格式。JSON 类似于实体类对象,通
常用来在客户端和服务器之间传递数据。在Ajax 出现之初,客户端脚本和服务器之间
传递数据使用的是 XML,但 XML 难于解析,代码量也比较大。JSON 出现后,以其轻
量级易于解析的优点,很快受到业界的广泛关注,现在大有将XML 取而代之的趋势。
JSON 的语法较简单,只需掌握如何使用 JSON 来定义对象和数组即可,其基本语
法如下。
1.定义 JSON 对象
语法
var JSON 对象 = {name:value,name:value…};
JSON 数据以名 /值对的格式书写,名和值用 ":"隔开,不同的名/ 值之间用 ","
隔开,整个表达式放在 "{ }" 中。其中,name 必须是字符串,由双引号 (" ") 括起来,
value 可以是 String、Namber、boolean、null、 对象、数组。列如:
var person = {"name":"张三","age":30,"spouse":null};
如果只有一个值,把它当成只有一个属性的对象即可,如{"name":"张三"}。
2. 定义 JSON 数组
语法
var JSON 数组 = [value,vlue…];
JSON 数组的整个表达式放在 "[ ]" 中,元素之间用 "," 隔开。
字符串数组举例:["中国","美国","俄罗斯"]。
对象数组举例:[{"name":"张三","age":30},{"name":"李四","age":40]。
了解了 JSON 的基本语法后,下面介绍如何使用 jQuery 处理 JSON 数据。
6.3.2 定义使用 JSON 格式的数据
示例 4 展示了如何以 JSON 对象和 JSON 数组来定义数据,并以页面中常见的格式
展示它们。
示例4
JavaScript 关键代码:
$(document).ready(function){
//1. 定义 JSON 格式的 user 对象,并在 div 中输出
var user = {
"id" : 1,
"name" : "张三",
"pwd" : "000"
};
$("#objectDiv").append("ID:"+user.id + "<br>")
.append("用户名 :"+user.name+"<br>")
.append("密码 :"+user.pwd+"<br>");
//2. 定义 JSON 格式的字符串数组,并在 ul 和 select 中输出
var ary = ["中","美","俄"];
var $ary = $("#arrayUI");//展示数据的 ul 元素
var $sel = $("#arrySel");//展示数据的 select 元素
$ary.each(function(){$ul.append("<li>"+this+"</li>");});
$sel.append("<option value = "'+(i+1)+"'>"+th