JavaWeb 第8章 项目实战 任务2 使用 Ajax 技术改造新闻发布系统 8.2.4 以 Ajax 方式删除主题

JavaWeb 应用设计及实战 目录

上一章    下一章

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

目录

8.2.4  以 Ajax 方式删除主题

  1. 需求介绍

   2. 实现思路

    （1）实现数据访问层和业务层

      (2) 编写 Servlet

   （3）修改 JSP 页面及编写 JavaScript 脚本

   (4)  部署运行并测试

---

8.2.4  以 Ajax 方式删除主题

  1. 需求介绍

    单击管理员页面主题列表中的 "删除" 超链接（如图 8.6 所示），以 Ajax 方式发

送请求删除对应主题，并在删除成功后移除页面中的相关主题 （如图 8.7 所示）。

   2. 实现思路

    （1）实现数据访问层和业务层

      新需求对于业务层和数据访问层的实现没有影响，可以直接沿用原有实现。

    图8.6   主题列表的 "删除" 超链接

    图8.7 删除成功

      (2) 编写 Servlet

       在删除主题功能中，将执行结果以JSON  格式响应给客户端，而非直接控制跳转。

……//省略其他功能
else if("del".equals(opr)){//删除主题
    String tid = request.getParameter("tid");
    String status;//记录执行结果
    String message;//记录提示信息
    try{
        int result = topicsService.deleteTopic(
                                            Inter.parseInt(tid));
        if(result == -1){
            status = "error";
            message = "该主题下还有文章，不能删除！"；
        }else if(result == 0){
            status = "error";
            message = "未找到相关主题！"；
        }else {
            status = "success";
            message = "已成功删除主题"；
        }
    } catch (Exception e){
        status = "error";
        message = "删除失败，请联系管理员！"；
    }
out.print("[{\"status\":\""+status+"\",|"message|":|""
                +message + "\"}]");
    }……省略其他功能

   响应内容的数据格式如下。

[{"status":"执行结果"，"message":"提示信息"}]

   （3）修改 JSP 页面及编写 JavaScript 脚本

  为了与删除主题功能相匹配，服务器端在生成主题列表的 "删除" 超链接时需注意。

<li>&nbsp;&nbsp;&nbsp;${topic.tname}&nbsp;&nbsp;&nbsp;&nbsp;
<a href = 'javascript:;'class = "tpsMdfLink"
              id = '${topic.tid}:${topic.tname}'>修改</a>&nbsp;&nbsp;&nbsp;
<a href = 'javascript:;'class = "tpsDelLink"
              id = '${topic.tid}">修改</a>
</li>

    在以上代码中，"删除" 超链接禁用了直接跳转，添加了 class 样式以方便 选择器筛选，

同时增加了 id 属性保存主题 id ，以便 在脚本中使用。

    在 JavaScript 脚本中为 "删除" 超链接注册单击事件，以 Ajax 方式发送删除请求。

var $optArea = $("#opt_area); //获得 id 为 opt_area 的内容变化区域
……//省略部分代码
//为 "删除" 超链接注册单击事件，"topicsList" 为主题列表所在 ul 元素的 id
$optArea.on("click","#topicsList>li.tpsDelLink",function(){
    if(confirm("确定要删除该主题吗？")){
        var a = this;
        $.getJSON("../util/topics","opr = del&tid="+this.id,
            function(data){//回调函数
                $msg.html(data[0].message).fadeIn(1000).fadeOut(5000);
                if(data[0].status == "success")
                    $(a).parent().remove();//删除成功后移除页面上的相关主题
                })；
            }
        });

 

   (4)  部署运行并测试

  了解具体实现请扫描二维码。