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

8.2.2 以 Ajax 方式添加主题

1. 需求介绍

单击管理员页面 /newspages/adimin.jsp 左侧的 " 添加主题" 超链接，以 Ajax 方式加载添加

主题页面 /newspages/topic_add.jsp ( 如图 8.3所示)。单击 "提交" 按钮以 Ajax 方式完成添加

主题的功能。

图 8.3 添加主题页面

2.实现思路

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

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

（2）编写 Servlet

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

……//  省略其他功能
else if ("add".equals(opr)){//添加主题
    String tname = request.getParameter("tname");
    String status;//记录执行结果
    String message;//记录提升信息
    try{
        int result = topicsService.addTopic(tname);
        if(result == -1){
            status = "exist";
            message = "当前主题已存在，请输入不同的主题！";
        }else{
            status = "success";
            message = "主题创建成功"；
        }
    }catch (Exception e){
        status = "error";
        message = "添加失败，请联系管理员！"；
    }
    out.print("[{\"status\":\"" + status +"\" ,\"message\":\""
                +message +"\"}]");
}……//省略其他功能

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

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

（3）修改 JSP 页面及变形 JavaScript 脚本

1.单击管理员页面左侧的 "添加主题" 超链接，以 Ajax 方式加载添加主题页面。

观察 /newspages 目录下的相关页面素材可以发现，单击管理员页面左侧链接时

切换的页面主体结构完全相同，仅页面中 <div id = "opt_area"></div> 区域的内容会发

生变化，因此完全可以通过 Ajax 方式加载目标页面 <div id = "opt_area"></div>区域的

内容，以实现无刷新更新管理员页面，从而实现切换效果。

修改左侧超链接 (在 /newspages/console_element/left.html 中)，禁用直接跳转。

<div id = "opt_list">
    <ul>
        <li><a href = "../newspages/news_add.jsp"> 添加新闻</a></li>
        <li><a href = "javascript:;">编辑新闻</a></li>
        <li><a href = "javascript:;>添加主题</a></li>
        <li><a href = "javascript:;">编辑主题</a></li>
    </ul>
</div>

在 JavaScript 脚本中为该超链接注册单击事件。

var $optArea = $("#opt_area");    //获得 id 为 opt_area 的内容变化区域
……//省略部分代码
var $leftLinks = $("#opt_list a");  //获取页面左侧功能链接
……//省略部分代码
$leftLink.eq(2).click(function()){    //为 "添加主题" 链接注册单击事件
    $optArea.load("../newspages/topic_add.jsp#opt_area>*");
});

单击 "添加主题" "编辑主题" 链接时，也可以按照这一思路，由服务器端生成

<div id ="opt_area"></div> 区域中的内容，通过 .load() 方法加载使用。

2.单击图 8.3 中的 "提交" 按钮，以 Ajax 方式发送请求，实现添加主题功能。

在 JavaScript 脚本中为 "提交" 按钮注册单击事件，发送 Ajax 请求并处理响应。

此外，为了显示服务器发回的提示消息，需要在 /newspages/admin.jsp 页面中添加一个

div 元素。

<div id = "main">
    <%@ include file = "console_element/left.html"%>
    <div id = "msg"
        style = "display:none;position:absolute;z-index:5;background-
        color:pink;font-size:16px;padding:5px 20px;"></div>
    <div id ="opt_area">
        <!--内容区域 -->
    </div>
</div>



var $msg = $("#msg");  //获取展示提示信息的 div

//为 "提交" 按钮注册单击事件，addTopicSubmit 为 "提交" 按钮的 id
$optArea.on("click","#addTopicSubmit",function()){
    var $tname = $optArea.find("#tname"); //获取输入主题的文本框
    var tnameValue = $tname.val();
    if(tnameValue ==""){ //进行表单验证并提交错误
        $msg.html("请输入主题名称！").fadeIn(1000).fadeOut(5000);
        $tname.focus();
        return false;
    }
    // 通过验证则发送 Ajax 请求，添加新主题
$.getJSON ("../util/topics",opr = add&tname = "+tnameValue,
            afterTopicAdd);
function afterTopicAdd(data){
    if(data[0].status == "success"){
        //添加成功，显示提示信息并用 Ajax 方式重新加载主题列表
        $msg.html(data[0].message).fadeIn(1000).fadeOut(5000);
        $optArea.load("../util/topics","opr=listHtml");
    }else if(data[0].status == "exist"){
         //主题已存在，显示提示信息并选中输入内容由用户充填
        $msg.html([data[0].message).fadeIn(1000).fadeOut(5000);
        $tname.select();
    }else if([data[0].status =="error"){
        //发生错误，显示提示信息并用  Ajax 方式重新加载主题列表
        $msg.html(data[0].message).fadeIn(1000).fadeOut(5000);
        $optArea.load("../util/topics","opr=listHtml");
    }
}
});//"提交" 按钮单击事件结束

jQuery 的 .on() 方法可以实现事件注册，其基本用法如下。

父元素 .on("事件名"，"针对子元素的选择器"，function);

该方法可以实现将指定方法注册到与选择器匹配的子元素的指定事件上。

（4）部署运行并测试

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

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

猜你喜欢

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