JavaWeb 第6章 Ajax 与 JQuery 任务3：使用原生 JSON 格式构建响应数据

JavaWeb 应用设计及实战 目录

上一章  下一章

上一个任务/上一节       下一个任务/下一节

目录

任务3：使用原生 JSON 格式构建响应数据

  6.3.1  认识 JSON

     1.定义 JSON 对象

    2.  定义 JSON 数组

6.3.2 定义使用 JSON 格式的数据

        示例4

HTML 关键代码：

程序运行结果如图 6.7 所示；

      技能训练

   上机练习 3 ——以常见页面元素展示 JSON 数据

图 6.8 以常见页面元素展示 JSON 数据

6.3.3 在响应数据中使用 JSON 格式

         图 6.9 管理员操作页面

        示例 5 

       示例 6 

       示例 7

    注意

       技能训练

   上机练习 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