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
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值