前端新增頁面的模態框，采用bootstarp建立。定義了empName，email，gender，depatName，四個屬性的ID；其中保存按鈕的ID：emp_save_btn,對應的點擊函數如下：
$("#emp_save_btn").click(function() {
//1.模態框的表單數據提交給服務器進行保存
//先對要提交給服務器的數據進行校驗
if (!validate_add_form()) {
return false;
};
//判斷用戶名是否成功
if ($(this).attr("ajax-va") == "error") {
return false;
}
//2.發送ajax請求保存員工,serialize表示序列化方法,將填入數據序列化
//$("#empAddmodal form").serialize();
//添加數據后，跳轉到最后一頁
$.ajax({
url : "${APP_PATH}/emp",
type : "POST",
data : $("#empAddmodal form").serialize(),
success : function(result) {
//alert(result.msg);
//當員工保存工作
//1.關閉模態框
$("#empAddmodal").modal('hide');
//2.來到最后一頁，顯示剛才保存的數據
//發送ajax請求顯示最后一頁數據即可,總記錄數肯定大於頁數
to_page(totalRecord);
}
});
});
步驟是 模態框的表單數據提交給服務器進行保存，所以先對要提交給服務器的數據進行校驗，采用方法為validate_add_form()，然后判斷用戶名是否已經存在。
調用ajax方法，發出emp請求（轉到controller層），POST方式，將填入的數據序列化，成功就保存數據，跳轉到最后一頁顯示添加的數據
validate_add_form方法先拿到要檢驗的數據采用正則表達式確定是否符合輸入要求，如果符合要求，調用show_validate_msg方法，代碼如下：
//校驗表單數據
function validate_add_form() {
//1.拿到要校驗的數據，使用正則表達式
var empName = $("#empName_add").val();
var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9fff]{2,5})/;
if (!regName.test(empName)) {
//alert("用戶名可以是2-5位中文或者6-16位英文和數字的組合");
//bootstrap校驗，給父標簽加上has-error
// $(ele).parent().addClass("has-error");
// $(ele).next("span").text(msg);
show_validate_msg("#empName_add","error","用戶名可以是2-5位中文或者6-16位英文和數字的組合");
return flase;
}else{
show_validate_msg("#empName_add","success","");
}
show_validate_msg，有三個參數，第一個為標簽ID，第二個為狀態，第三個顯示文本。
1 //顯示校驗結果的提示信息，抽象成方法 2 function show_validate_msg(ele,status,msg){ 3 //清除當前元素的校驗狀態 4 $(ele).parent().removeClass("has-success has-error"); 5 $(ele).next("span").text(""); 6 7 if("success"==status) 8 { 9 $(ele).parent().addClass("has-success"); 10 $(ele).next("span").text(msg); 11 }else if("error"==status) 12 { 13 $(ele).parent().addClass("has-error"); 14 $(ele).next("span").text(msg); 15 } 16 } 17
注意的幾個細節：
1.采用函數插入頁面元素
1 $("<tr></tr>").append(empIdTd).append(empNameTd).append( 2 GenderTd).append(EmailTd).append(deptNameTd).append( 3 btnTd).appendTo("#emps_table tbody");
2.append方法執行完以后還是返回原來的元素
3.采用Response獲得json字符串，然后頁面解析字符串
4.跳轉頁面采用to_page方法，里面依次執行三個方法，解析並顯示員工數據，解析並顯示分頁信息，顯示分頁信息
5.返回的json字符串
6.前端頁面的ajax發出請求，controller收到請求，並得到參數，轉到service層的方法，service層調用mapper.java中的方法。該方法是mapper,.xml的聲明，是現在mapper.xml里。
完整頁面如下：
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 4 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 5 <html> 6 <head> 7 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 8 <title>員工列表</title> 9 <% 10 pageContext.setAttribute("APP_PATH", request.getContextPath()); 11 %> 12 <!-- web路徑， 13 不以/開始的相對路徑，找資源，以當前資源的路徑為基准 14 以/開始的相對路徑，找資源，以服務器的路徑為標准 15 src一般為http：//localhost：3306/xiaofan，（項目名） 16 --> 17 18 19 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> 20 21 <%-- <script type="text/javascript" src="${APP_PATH}/static/js/jquery.min.js"></script> --%> 22 <link 23 href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" 24 rel="stylesheet"> 25 <script src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> 26 </head> 27 28 <!-- 員工添加的模態框--> 29 30 <!-- Modal --> 31 <div class="modal fade" id="empAddmodal" tabindex="-1" role="dialog" 32 aria-labelledby="myModalLabel"> 33 <div class="modal-dialog" role="document"> 34 <div class="modal-content"> 35 <div class="modal-header"> 36 <button type="button" class="close" data-dismiss="modal" 37 aria-label="Close"> 38 <span aria-hidden="true">×</span> 39 </button> 40 <h4 class="modal-title" id="myModalLabel">添加員工</h4> 41 </div> 42 <div class="modal-body"> 43 44 <!-- 彈窗提示框顯示的頁面開始,Spring自動封裝form提交對象，要求name和Bean中名字一樣 --> 45 <form class="form-horizontal"> 46 47 <div class="form-group"> 48 <label class="col-sm-2 control-label">empName</label> 49 <div class="col-sm-10"> 50 <input type="text" class="form-control" id="empName_add" 51 placeholder="empName" name="workerName"> 52 <span class="help-block"></span> 53 </div> 54 </div> 55 56 <div class="form-group"> 57 <label class="col-sm-2 control-label">email</label> 58 <div class="col-sm-10"> 59 <input type="text" class="form-control" id="email_add" 60 placeholder="email" name="workerEmail"> 61 <span class="help-block"></span> 62 </div> 63 </div> 64 65 <div class="form-group"> 66 <label class="col-sm-2 control-label">gender</label> 67 <div class="col-sm-10"> 68 <label class="radio-inline"> <input type="radio" 69 id="gender1_add" value="M" name="workerGender"> 70 男 71 </label> <label class="radio-inline"> <input type="radio" 72 id="gender2_add" value="W" name="workerGender"> 73 女 74 </label> 75 </div> 76 </div> 77 78 <div class="form-group"> 79 <label class="col-sm-2 control-label">deptName</label> 80 <div class="col-sm-10"> 81 <!-- 部門提交ID ,可以通過ID，也可以通過modal尋找--> 82 <select class="form-control" name="dId" "> 83 84 </select> 85 </div> 86 </div> 87 88 89 </form> 90 </div> 91 <!-- 彈窗提示框顯示的頁面結束 --> 92 93 <div class="modal-footer"> 94 <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> 95 <button type="button" class="btn btn-primary" id="emp_save_btn">保存</button> 96 </div> 97 </div> 98 </div> 99 </div> 100 101 102 <body font-size="12px"> 103 104 <!-- 搭建顯示頁面 --> 105 <div class="container"> 106 <!-- 標題 --> 107 <div class="row"> 108 <div class="col-md-12"> 109 <h1>SSM-CRUD</h1> 110 </div> 111 </div> 112 <!-- 按鈕 --> 113 <div class="row"> 114 <div class="col-md-4 col-md-offset-8"> 115 <button class="btn btn-primary" id="emp_add_modal_bn">新增</button> 116 <button class="btn btn-danger">刪除</button> 117 </div> 118 </div> 119 <!-- 顯示表格信息 --> 120 <div class="row"> 121 <div class="col-md-12"> 122 <table class="table table-hover" id="emps_table"> 123 <thead> 124 <tr> 125 <th>序號</th> 126 <th>Name</th> 127 <th>Gender</th> 128 <th>Email</th> 129 <th>deptName</th> 130 <th>操作</th> 131 </tr> 132 </thead> 133 <tbody> 134 </tbody> 135 136 137 </table> 138 </div> 139 </div> 140 <!-- 顯示分頁信息--> 141 <div class="row"> 142 <!-- 分頁文字信息，6列--> 143 <div class="col-md-6" id="page_info_area"></div> 144 <!-- 分頁條信息--> 145 <div class="col-md-6" id="page_nav_area"></div> 146 </div> 147 148 </div> 149 150 <script type="text/javascript"> 151 152 var totalRecord; 153 //頁面加載完成以后，發送一個ajax請求，得到分頁數據 154 $(function() { 155 //去首頁 156 to_page(1); 157 }); 158 159 function to_page(pn) { 160 $.ajax({ 161 url : "${APP_PATH}/emps", 162 data : "pn=" + pn, 163 type : "GET", 164 success : function(result) { 165 //console.log(result); 166 //1.解析並顯示員工數據 167 build_workers_table(result); 168 169 //2.解析並顯示分頁信息 170 build_page_info(result); 171 //3.顯示分頁條信息 172 build_page_nav(result); 173 174 } 175 }); 176 177 } 178 //1.解析並顯示員工數據 179 function build_workers_table(result) { 180 //清空表格數據 181 $("#emps_table tbody").empty(); 182 var emps = result.extend.pageInfo.list; 183 //jquery遍歷方法each，emps第一個遍歷的元素,item當前對象 184 $.each(emps, function(index, item) { 185 var empIdTd = $("<td></td>").append(item.workerId); 186 var empNameTd = $("<td></td>").append(item.workerName); 187 var GenderTd = $("<td></td>").append(item.workerGender == 'M' ? "男" : "女"); 188 var EmailTd = $("<td></td>").append(item.workerEmail); 189 var deptNameTd = $("<td></td>").append(item.department.deptName); 190 var editBtn = $("<button></button>").addClass( 191 "btn btn-primary btn-sm").append( 192 $("<span></span>").addClass( 193 "glyphicon glyphicon-pencil")).append("編輯"); 194 var delBth = $("<button></button>").addClass( 195 "btn btn-danger btn-sm").append( 196 $("<span></span>") 197 .addClass("glyphicon glyphicon-trash")).append( 198 "刪除"); 199 var btnTd = $("<td></td>").append(editBtn).append(" ").append( 200 delBth); 201 //append方法執行完以后還是返回原來的元素 202 $("<tr></tr>").append(empIdTd).append(empNameTd).append( 203 GenderTd).append(EmailTd).append(deptNameTd).append( 204 btnTd).appendTo("#emps_table tbody"); 205 /* <button class="btn btn-primary btn-sm"> 206 <span class="glyphicon glyphicon-pencil " aria-hidden="true"></span> 207 編輯 208 </button> */ 209 210 }); 211 212 } 213 214 //2.解析並顯示分頁信息,列出 215 function build_page_info(result) { 216 $("#page_info_area").empty(); 217 $("#page_info_area").append( 218 "當前" + result.extend.pageInfo.pageNum + "頁,總" 219 + result.extend.pageInfo.pages + "頁 ,總" 220 + result.extend.pageInfo.total + "條記錄"); 221 totalRecord=result.extend.pageInfo.total; 222 } 223 //3.顯示分頁條信息,點擊跳轉下一頁 224 /* <!-- 分頁條信息--> 225 <div class="col-md-6"> 226 <nav aria-label="Page navigation"> 227 <ul class="pagination"> 228 <li><a href="${APP_PATH }/emps?pn=1">首頁</a></li> 229 <li><a href="${APP_PATH }/emps?pn=${pageInfo.pageNum-1}" 230 aria-label="Previous"> <span aria-hidden="true">«</span> 231 </a></li> 232 */ 233 function build_page_nav(result) { 234 //page_nav_area 235 $("#page_nav_area").empty(); 236 var ul = $("<ul></ul>").addClass("pagination"); 237 238 //構建元素 239 var firstPageli = $("<li></li>").append( 240 $("<a></a>").append("首頁").attr("href", "#")); 241 var prePageli = $("<li></li>").append( 242 $("<a></a>").append("«")); 243 if (result.extend.pageInfo.hasPreviousPage == false) { 244 firstPageli.addClass("disabled"); 245 prePageli.addClass("disabled"); 246 } else { 247 //為元素添加點擊事件 248 firstPageli.click(function() { 249 250 to_page(1); 251 252 }); 253 prePageli.click(function() { 254 //當前頁面減一 255 to_page(result.extend.pageInfo.pageNum - 1); 256 257 }); 258 259 } 260 261 var nextPageli = $("<li></li>").append( 262 $("<a></a>").append("»")); 263 var lastPageli = $("<li></li>").append( 264 $("<a></a>").append("末頁").attr("href", "#")); 265 if (result.extend.pageInfo.hasNextPage == false) { 266 nextPageli.addClass("disabled"); 267 lastPageli.addClass("disabled"); 268 } else { 269 nextPageli.click(function() { 270 //當前頁面減一 271 to_page(result.extend.pageInfo.pageNum + 1); 272 273 }); 274 lastPageli.click(function() { 275 //當前頁面減一 276 to_page(result.extend.pageInfo.pages); 277 278 }); 279 280 } 281 282 //添加首頁和前一頁的提示 283 ul.append(firstPageli).append(prePageli); 284 //遍歷頁碼號1，2，3 285 $.each(result.extend.pageInfo.navigatepageNums, function(index, 286 item) { 287 var numLi = $("<li></li>").append($("<a></a>").append(item)); 288 if (result.extend.pageInfo.pageNum == item) { 289 numLi.addClass("active"); 290 } 291 numLi.click(function() { 292 293 to_page(item); 294 }); 295 ul.append(numLi); 296 }); 297 //添加下一頁和末頁的提示 298 ul.append(nextPageli).append(lastPageli); 299 //把url加入 300 var navEle = $("<nav></nav>").append(ul); 301 navEle.appendTo("#page_nav_area"); 302 } 303 304 //點擊新增按鈕彈出模態框 305 $("#emp_add_modal_bn").click(function() { 306 //清空表單數據（表單重置）,取出form對象 307 $("#empAddmodal form")[0].reset(); 308 //發送ajax請求，查出部門信息，顯示在下拉列表中 309 getDepts(); 310 //打開模態框，$("#id").modal 311 $("#empAddmodal").modal({ 312 backdrop : "static" 313 }); 314 315 }); 316 //查出所有的部門信息並顯示在下拉列表中 317 318 function getDepts() { 319 $.ajax({ 320 url : "${APP_PATH}/depts", 321 type : "GET", 322 success : function(result) { 323 $.each(result.extend.depts,function() { 324 var optionEle = $("<option></option>").append( 325 this.deptName).attr("value", this.deptId); 326 optionEle.appendTo("#empAddmodal select"); 327 }); 328 329 } 330 }); 331 } 332 333 //校驗表單數據 334 335 function validate_add_form() { 336 //1.拿到要校驗的數據，使用正則表達式 337 var empName = $("#empName_add").val(); 338 var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9fff]{2,5})/; 339 if (!regName.test(empName)) { 340 //alert("用戶名可以是2-5位中文或者6-16位英文和數字的組合"); 341 //bootstrap校驗，給父標簽加上has-error 342 // $(ele).parent().addClass("has-error"); 343 // $(ele).next("span").text(msg); 344 show_validate_msg("#empName_add","error","用戶名可以是2-5位中文或者6-16位英文和數字的組合"); 345 346 347 return flase; 348 }else{ 349 350 show_validate_msg("#empName_add","success",""); 351 352 } 353 //2.檢驗郵箱 354 355 var email = $("#email_add").val(); 356 var regemail = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/; 357 if (!regemail.test(email)) { 358 //alert("郵箱格式不正確"); 359 //應該清空這個元素之前的樣式 360 //$("#email_add").parent().addClass("has-error"); 361 //$("#email_add").next("span").text("郵箱格式不正確"); 362 show_validate_msg("#email_add","error","郵箱格式不正確"); 363 return flase; 364 } else { 365 //$("#email_add").parent().addClass("has-success"); 366 //$("#empName_add").next("span").text("郵箱格式不正確"); 367 368 show_validate_msg("#email_add","success",""); 369 } 370 return true; 371 } 372 373 //顯示校驗結果的提示信息，抽象成方法 374 function show_validate_msg(ele,status,msg){ 375 //清除當前元素的校驗狀態 376 $(ele).parent().removeClass("has-success has-error"); 377 $(ele).next("span").text(""); 378 379 if("success"==status) 380 { 381 $(ele).parent().addClass("has-success"); 382 $(ele).next("span").text(msg); 383 }else if("error"==status) 384 { 385 $(ele).parent().addClass("has-error"); 386 $(ele).next("span").text(msg); 387 } 388 } 389 390 $("#empName_add").change(function(){ 391 //發送ajax請求檢驗用戶名是否可用 392 var empName=this.value; 393 $.ajax({ 394 url:"${APP_PATH}/checkuser", 395 data:"empName="+empName, 396 type:"POST", 397 success:function(result){ 398 if(result.code==100) 399 {//result為MSG 400 show_validate_msg("#empName_add","success","用戶名可用"); 401 $("#emp_save_btn").attr("ajax-va","success"); 402 } 403 else{ 404 show_validate_msg("#empName_add","error","用戶名不可用"); 405 $("#emp_save_btn").attr("ajax-va","error"); 406 } 407 } 408 }); 409 410 }); 411 412 //點擊保存，保存員工 413 414 $("#emp_save_btn").click(function() { 415 //1.模態框的表單數據提交給服務器進行保存 416 //先對要提交給服務器的數據進行校驗 417 if (!validate_add_form()) { 418 return false; 419 }; 420 //判斷用戶名是否成功 421 if ($(this).attr("ajax-va") == "error") { 422 return false; 423 } 424 //2.發送ajax請求保存員工,serialize表示序列化方法,將填入數據序列化 425 //$("#empAddmodal form").serialize(); 426 //添加數據后，跳轉到最后一頁 427 $.ajax({ 428 url : "${APP_PATH}/emp", 429 type : "POST", 430 data : $("#empAddmodal form").serialize(), 431 success : function(result) { 432 //alert(result.msg); 433 //當員工保存工作 434 //1.關閉模態框 435 $("#empAddmodal").modal('hide'); 436 //2.來到最后一頁，顯示剛才保存的數據 437 //發送ajax請求顯示最后一頁數據即可,總記錄數肯定大於頁數 438 to_page(totalRecord); 439 } 440 }); 441 442 }); 443 </script> 444 </body> 445 </html>