SSM框架中前端页面（AJAX+Jquery+spring mvc+bootstrap）
前端新增页面的模态框，采用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][email protected]([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>
posted on 2018-04-05 22:53 zhangdazhuang 阅读(...) 评论(...) 编辑 收藏