JavaWeb Section 8 project combat mission 2 with Ajax transformation Press Release System 8.2.2 Ajax way to add a theme

8.2.2 Ajax way to add a theme

1. Introduction Demand

Click the Admin page /newspages/adimin.jsp the left side of the "Add topics" hyperlink to load the add Ajax way

Topic Page /newspages/topic_add.jsp (shown in Figure 8.3). Click "Submit" button to complete the add Ajax way

Function topics.

Figure 8.3 Adding topics page

2. realization of ideas

(1) data access and service layers

The new requirements do not affect the achievement of the business layer and data access layer, you can directly use the original implementation.

(2) the preparation of Servlet

Add theme functionality, the response in JSON format the results to the client, rather than direct control jumps.

……//  省略其他功能
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 +"\"}]");
}……//省略其他功能

Response content data format is as follows.

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

(3) modify the JSP pages and deformation JavaScript script

1. Click on the left side of the page Administrator "Add topics" hyperlink to load the Ajax way to add the theme page.

When the relevant page of the material under observation / newspages directory can be found, click the Admin page links on the left

Page switching the main structure is identical, only the page <div id = "opt_area"> </ div> content area will send

Is changed, the load can thus target page by way Ajax <div id = "opt_area"> </ div> region

Content to achieve without refresh page to update the administrator to achieve transitions.

Modify the left hyperlink (in /newspages/console_element/left.html in), disable direct jump.

<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>

In JavaScript script for that registration click a hyperlink event.

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>*");
});

Click the "Add Theme", "edit themes" link can also be generated by the server-side with this thinking

<Div id = "opt_area"> </ div> content area by .load () method using loading.

Figure 8.3 2. Click the "Submit" button to send Ajax request, add a subject to achieve functionality.

To "submit" button click event registration, sending Ajax requests and process responses in JavaScript scripts.

In addition, the server sends back a message to prompt displays, you need to add a page in /newspages/admin.jsp

div elements.

<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");
    }
}
});//"提交" 按钮单击事件结束

the jQuery .on () method can be implemented event registration, the basic usage is as follows.

The parent element .on ( "event name", "for the child element selectors", function);

The method can be implemented to register the specified method to the specified event selector matches the child elements.

(4) to deploy and test run

Please understand the specific realization of two-dimensional code scanning.

JavaWeb Section 8 project combat mission 2 with Ajax transformation Press Release System 8.2.2 Ajax way to add a theme

Guess you like