テーマを追加する8.2.2 Ajaxの道
1.はじめに需要
追加Ajaxの方法をロードする「のトピックを追加」ハイパーリンクの左側/newspages/adimin.jsp管理ページをクリックします
（図8.3に示されている）トピックページ/newspages/topic_add.jsp。追加Ajaxの方法を完了するために、ボタンを「送信」をクリックします
関数のトピック。
図8.3のトピックのページを追加
アイデアの実現2。
（1）データアクセス及びサービス層
新しい要件は、ビジネス層とデータアクセス層の達成に影響を与えることはありません、あなたは直接元の実装を使用することができます。
サーブレットの（2）の調製
テーマ機能を追加し、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>*");
});また、この考え方で、サーバー側で生成することができます「をテーマを追加」、「編集テーマ」リンクをクリックしてください
ローディングを用い.LOADによって<DIVのID = "opt_area"> </ div>コンテンツ領域（）メソッド。
図8.3 2.機能を実現するために件名を追加し、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親要素。
この方法は、指定されたイベントセレクタが子要素に一致する指定されたメソッドを登録するために実装することができます。
（4）を展開し、試験実行します
二次元コードスキャンの具体的な実現を理解してください。