JavaWeb 第7章 JQuery 的 Ajax 交互扩展 任务2：通过 Ajax 请求直接加载新闻和主题页面

JavaWeb 应用设计及实战 目录

上一章   下一章

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

目录

7.2.1   在 Ajax 请求中返回 HTML 格式内容

       示例4

                 注意

       示例 5 

       示例 6 

                  注意

       技能训练

     上机练习 3 ——在 Ajax   中直接返回 HTML 内容生成主题管理页面

7.2.2   .load() 方法

              表 7-4 .load() 方法的常用参数

示例 7 

     知识扩展

    技能训练

    上机练习4——使用 .load() 方法为管理员页面加载服务器生成的主题列表

---

7.2.1   在 Ajax 请求中返回 HTML 格式内容

      在前面介绍的 Ajax 实现中，复杂结构的响应数据由服务器通过 JSON 格式发送，

客户端接收后再经过 JavaScript 提取数据并构建 HTML 文档结构进行展示。

      除此之外，服务器端还可以直接产生 HTML 格式的响应结果，客户端则可以将

响应结果直接套用在现有页面中。下面任以加载管理员页面的新闻列表为列展示此种

实现方式，供大家了解。了解两种响应格式的区别请扫描二维码。

  加载 HTML 内容

    首先修改管理员页面通过 Ajax 获取新闻列表的 JavaScript 脚本，如示例 4 所示。

   示例4

$(document).ready(function()){
    function initNews(){//使用 Ajax 技术获取新闻列表数据
        $.ajax({
            "url"          :"../util/news",
            "type"         :"GET",
            "data"         :"opr = listHtml",
            "dataType"     :"html",
            "success"      :"processNewsList",
        });
    }
    function processNewsList(data){//展示新闻列表
        $("#opt_area>ul").html(data);
    }
    ……//省略其他代码
});

       注意

              在回调方法 procssNewsList() 中，没有对响应结果 data 做任何处理，而是将

       其直接设置成列表的内容。

    调整 NewsServlet 中的相关功能实现，以 HTML 元素的格式构建响应内容，如示例

5 所示。

     示例 5 

……//省略其他代码
else if("listHtml".equals(opr)){//编辑新闻时对新闻的查找
    List<News> list = newsService.findAllNews();
    News news = null;
    StringBuffer newsList = new StringBuffer("");
    for(int i =0;i<list.size();){
        news = list.get(i);
        newsList.append("<li>"+news.g