轉載自：https://www.cnblogs.com/kebibuluan/p/9017754.html
3、尚硅谷_SSM高級整合_使用ajax操作實現修改員工的功能
當我們點擊編輯案例的時候，我們要彈出一個修改聯系人的模態對話框，在上面可以修改對應的聯系人的信息
這里我們我們要編輯按鈕添加點擊事件彈出對話框
第一步：在頁面中在新增一個編輯聯系人的模態對話框
第二步：給編輯按鈕添加點擊事件，這里要給多個編輯按鍵添加點擊事件，我們使用class的方式，我們給多個編寫按鈕添加同一個相同的class屬性，不用分別設置不同的id
//添加編輯按鈕
var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
.append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("編輯");
編輯按鈕都有一個edit_btn標志，我們給它添加點擊事件
//給編輯按鈕添加點擊事件
$(".edit_btn").click(function(){
});
寫成這種形式是無法給按鈕添加事件的，這里要特別的注意，因為上面的代碼是寫在javasript代碼中，javascript在頁面創建完成之前就已經執行完了，而上面的編輯和刪除按鈕我們都是頁面加載完成之后使用ajax到服務器請求得到數據之后重新添加的，如果采用上面的實現，在執行javascript代碼的
時候實際上還不存在編輯和刪除按鈕，添加按鈕點擊事件當然會失敗，這里一定要特別注意的，使用ajax特別需要注意的地方。我們可以采用下面的方式進行解析
上面的.click()綁定點擊事件 和 下面的 $(document).on("click",".pagination li:gt(0):not(:last)",function(){});的區別在於：
1》》.click只能為頁面現有的元素綁定點擊事件，如果是動態生成的新的元素，是沒有事件的
2》》而$(document).on("click","指定的元素",function(){});方法則是將指定的事件綁定在document上，而新產生的元素如果符合指定的元素，那就觸發此事件
我們來看下我們的代碼
index.sjp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>員工列表</title>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- web路徑：
不以/開始的相對路徑，找資源，以當前資源的路徑為基准，經常容易出問題。
以/開始的相對路徑，找資源，以服務器的路徑為標准(http://localhost:3306)；需要加上項目名
http://localhost:3306/crud
-->
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-2.1.1.js"></script>
<link href="${APP_PATH }/static/bootstrap-3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="${APP_PATH}/static/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 修改員工信息的對話框 -->
<div class="modal fade" id="updateEmpModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">修改員工</h4>
</div>
<div class="modal-body">
<!-- 實體類的表單,表單項 的name需要給實體bean對象的一一對應起來，springmvc會幫我們自動封裝-->
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="text" name="empName" class="form-control" id="empNameModalUpdate" placeholder="name">
<span id="name_span_update" class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">郵箱</label>
<div class="col-sm-10">
<input type="text" name="email" class="form-control" id="emailModalUpdate" placeholder="eamil">
<span id="email_span_update" class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">性別</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="gender" id="genderModal" value="F"> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="genderModal" value="M"> 女
</label>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">部門</label>
<div class="col-sm-5">
<select name="dId" id="dIdModalUpdate"class="form-control">
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id ="saveEmp">更新</button>
</div>
</div>
</div>
</div>
<!-- 新增員工信息的對話框 -->
<div class="modal fade" id="addEmpModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">新增員工</h4>
</div>
<div class="modal-body">
<!-- 實體類的表單,表單項 的name需要給實體bean對象的一一對應起來，springmvc會幫我們自動封裝-->
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="text" name="empName" class="form-control" id="empNameModal" placeholder="name">
<span id="name_span" class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">郵箱</label>
<div class="col-sm-10">
<input type="text" name="email" class="form-control" id="emailModal" placeholder="eamil">
<span id="email_span" class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">性別</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="gender" id="genderModal" value="F"> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="genderModal" value="M"> 女
</label>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">部門</label>
<div class="col-sm-5">
<select name="dId" id="dIdModal"class="form-control">
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id ="saveEmp">保存</button>
</div>
</div>
</div>
</div>
<!-- 搭建顯示頁面 -->
<div class="container">
<!-- 標題 -->
<div class="row">
<div class="col-md-12">
<h1>SSM-CRUD</h1>
</div>
</div>
<!-- 按鈕 -->
<div class="row">
<div class="col-md-4 col-md-offset-8">
<button class="btn btn-primary" id="addEmp">新增</button>
<button class="btn btn-danger">刪除</button>
</div>
</div>
<!-- 顯示表格數據 -->
<div class="row">
<div class="col-md-12">
<table class="table table-hover" id="emps_table">
<thead>
<tr>
<th>#</th>
<th>empName</th>
<th>gender</th>
<th>email</th>
<th>deptName</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<!-- 顯示分頁信息 -->
<div class="row">
<!--分頁文字信息 -->
<div class="col-md-6" id="page_info_area"></div>
<!-- 分頁條信息 -->
<div class="col-md-6" id="page_nav_area"></div>
</div>
</div>
<!-- 當頁面加載完成之后發起ajax請求獲得數據 ，不清楚的看鋒利jquery教程相當的經典-->
<script type="text/javascript">
//定義一個全局變量，獲得當前中的記錄數
var total;
$(function(){
//頁面加載完畢，去首頁獲得對應的數據
to_page(1);
});
//使用ajax到后台服務器查詢數據
function to_page(pn){
$.ajax({
url:"${APP_PATH}/emps",
data:"pn="+pn,
type:"GET",
success:function(result){
//console.log(result);
//1、解析並顯示員工數據
build_emps_table(result);
//2、解析並顯示分頁信息
build_page_info(result);
//3、解析顯示分頁條數據
build_page_nav(result);
}
});
}
//解析服務器返回的json數據，並在員工表中顯示出來
function build_emps_table(result){
//在構建之前先清空所有的數據
$("#emps_table tbody").empty();
//第一步：獲得所有的員工數據
var emps = result.extend.pageInfo.list;
//第二步：對員工數據進行遍歷顯示出來
$.each(emps,function(index,item){
var empIdTd = $("<td></td>").append(item.empId);
var empNameTd = $("<td></td>").append(item.empName);
var gender = item.gender == 'M'?"男":"女";
var genderTd = $("<td></td>").append(gender);
var emailTd = $("<td></td>").append(item.email);
var departmentNameTd = $("<td></td>").append(item.department.deptName);
//添加編輯按鈕
var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
.append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("編輯");
var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
.append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("刪除");
var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
//將上面的table表td數據添加到tr中，這里是一個鏈式操作
$("<tr></tr>").append(empIdTd)
.append(empNameTd)
.append(genderTd)
.append(emailTd)
.append(departmentNameTd)
.append(btnTd)
.appendTo("#emps_table tbody");
//"#emps_table tbody"表示選取id為emps_table下的所有的<tbody>的元素，不清楚的看鋒利的jquery書籍相當的經典
});
}
//解析顯示分頁信息
function build_page_info(result){
$("#page_info_area").empty();
$("#page_info_area").append("當前第"+result.extend.pageInfo.pageNum+"頁,"+"總共"+result.extend.pageInfo.pages+"頁,"+"總共"+
result.extend.pageInfo.total+"條記錄");
total = result.extend.pageInfo.total;
}
//解析右下角的導航欄
function build_page_nav(result){
//page_nav_area
$("#page_nav_area").empty();
var ul = $("<ul></ul>").addClass("pagination");
//構建元素
var firstPageLi = $("<li></li>").append($("<a></a>").append("首頁").attr("href","#"));
var prePageLi = $("<li></li>").append($("<a></a>").append("«"));
//判斷是否有前一頁，如果沒有前一頁就不能點擊
if(result.extend.pageInfo.hasPreviousPage == false){
firstPageLi.addClass("disabled");
prePageLi.addClass("disabled");
}
//給前一頁和首頁添加按鈕點擊事件
firstPageLi.click(function(){
to_page(1);
});
prePageLi.click(function(){
//跳轉到當前頁的前一頁
to_page(result.extend.pageInfo.pageNum-1);
});
var nextPageLi = $("<li></li>").append($("<a></a>").append("»"));
var lastPageLi = $("<li></li>").append($("<a></a>").append("末頁").attr("href","#"));
//如果沒有下一頁不能被點擊
if(result.extend.pageInfo.hasNextPage == false){
nextPageLi.addClass("disabled");
lastPageLi.addClass("disabled");
}
//給下一頁和尾頁添加點擊事件
nextPageLi.click(function(){
to_page(result.extend.pageInfo.pageNum+1);
});
lastPageLi.click(function(){
to_page(result.extend.pageInfo.pages);
});
//添加首頁和前一頁 的提示
ul.append(firstPageLi).append(prePageLi);
//1,2，3遍歷給ul中添加頁碼提示
$.each(result.extend.pageInfo.navigatepageNums,function(index,item){
var numLi = $("<li></li>").append($("<a></a>").append(item));
//判斷當前遍歷的如果是當前正在顯示的頁面，應該高亮顯示
if(result.extend.pageInfo.pageNum == item){
numLi.addClass("active");
}
//添加點擊事件
numLi.click(function(){
//點擊的時候重新使用ajax到服務器查詢數據
to_page(item);
});
ul.append(numLi);
});
//添加下一頁和末頁 的提示
ul.append(nextPageLi).append(lastPageLi);
//把ul加入到nav
var navEle = $("<nav></nav>").append(ul);
navEle.appendTo("#page_nav_area");
}
//點擊新增按鈕，彈出新增加員工的對話框
$("#addEmp").click(function(){
//首先清空頁面的所有數據
//將jquery對象轉化成docment對象，調用docment對象的reset方法
$("#addEmpModal form")[0].reset();
$("#name_span").text("");
$("#empNameModal").parent().removeClass("has-success has-error");
var parent = $("#dIdModal");
//使用ajax請求部門的數據
$.ajax(
{
url:"${APP_PATH}/depts",
type:"GET",
success:function(result){
//對result數據進行解析添加到
var depts = result.extend.depts;
$.each(depts,function(index,item){
//給option選項設置值應該是deptid
var opt = $("<option></option>").append(item.deptName).attr("value",item.deptId);
parent.append(opt);
});
}
}
);
//彈出對話框
$('#addEmpModal').modal({
backdrop:'static'
})
});
//點擊保存聯系人
$("#saveEmp").click(function(){
//判斷當前的聯系人是否可用
if( $(this).attr("isUserExist")=="yes"){
return false;
}
//首先判斷輸入的參數是否滿足規則
if(!validate_add_form()){
return false;
}
$.ajax({
url:"${APP_PATH}/save",
data:$("#addEmpModal form").serialize(),
type:"post",
success:function(result){
//首先需要判斷后端返回的結果中，后端對用戶的校驗結果
//alert(result.extend.err_map.email);
//alert(result.extend.err_map.empName);
//這里需要注意的是如果郵箱格式錯誤，姓名正確，result.extend.err_map.email中就像攜帶錯誤的信息，result.extend.err_map.empName的信息是undefined
if(result.code == 100){
//保存聯系人成功需要做下面的幾件事情
//第一件事情就是讓新建聯系人的對話框摸太框消失
$("#addEmpModal").modal('hide');
//第二個跳轉到最后一頁
//這里如何跳轉到最后一頁了，mybatis分頁插件這里提供了一個功能，例如現在員工總數是100人，每頁顯示5人，最大的分頁數目就是5，你如果輸入6
//也是按照最大的5來進行查詢。員工的總數肯定是大於最大的分頁數目的，現在要查詢最后一頁的數據，我以員工的總數進行查詢
//使用ajax重新再查詢下最后一頁員工的數目
//
to_page(total);
}else{
alert(result.extend.err_map.email);
//說明郵箱格式錯誤
if(undefined != result.extend.err_map.email){
alert(result.extend.err_map.email);
$("#emailModal").parent().removeClass("has-success has-error");
$("#email_span").text("");
$("#emailModal").parent().addClass("has-error");
//給span節點添加.help-block屬性
$("#email_span").addClass("help-block").text(result.extend.err_map.email);
}
//說明姓名格式有錯誤
if(undefined != result.extend.err_map.empName){
//添加元素狀態之前。先清空清除當前元素的校驗狀態
$("#empNameModal").parent().removeClass("has-success has-error");
$("#name_span").text("");
//給當前節點的父元素添加has-error屬性
$("#empNameModal").parent().addClass("has-error");
//給span節點添加.help-block屬性
$("#name_span").addClass("help-block").text(result.extend.err_map.empName);
}
}
}
});
});
//juqery前台校驗數據
//校驗表單數據
function validate_add_form(){
//1、拿到要校驗的數據，使用正則表達式
var empName = $("#empNameModal").val();
var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
if(!regName.test(empName)){
//添加元素狀態之前。先清空清除當前元素的校驗狀態
$("#empNameModal").parent().removeClass("has-success has-error");
$("#name_span").text("");
//給當前節點的父元素添加has-error屬性
$("#empNameModal").parent().addClass("has-error");
//給span節點添加.help-block屬性
$("#name_span").addClass("help-block").text("姓名格式不正確");
return false;
}else{
$("#empNameModal").parent().removeClass("has-success has-error");
$("#name_span").text("");
//給當前節點的父元素添加has-error屬性
$("#empNameModal").parent().addClass("has-success");
//給span節點添加.help-block屬性
$("#name_span").addClass("help-block").text("");
};
//2、校驗郵箱信息
var email = $("#emailModal").val();
var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
if(!regEmail.test(email)){
$("#emailModal").parent().removeClass("has-success has-error");
$("#email_span").text("");
$("#emailModal").parent().addClass("has-error");
//給span節點添加.help-block屬性
$("#email_span").addClass("help-block").text("郵箱格式不正確");
return false;
}else{
$("#emailModal").parent().removeClass("has-success has-error");
$("#email_span").text("");
$("#emailModal").parent().addClass("has-success");
//給span節點添加.help-block屬性
$("#email_span").addClass("help-block").text("");
}
return true;
}
//給輸入聯系人的input添加change事件，判斷當前聯系人是否可用
$("#empNameModal").change(function(){
//this表示當前操作的對象，是docment類型
//獲得當前輸入的name的值
var name=$(this).val();
$.ajax({
url:"${APP_PATH}/isUserExist",
type:"post",
data:"empName="+name,
success:function(result){
if(result.code == 200){
//說明該聯系人已經在后台存在不可以
//添加元素狀態之前。先清空清除當前元素的校驗狀態
$("#empNameModal").parent().removeClass("has-success has-error");
$("#name_span").text("");
//給當前節點的父元素添加has-error屬性
$("#empNameModal").parent().addClass("has-error");
//給span節點添加.help-block屬性
$("#name_span").addClass("help-block").text("該聯系人已經存在");
//如果當前聯系人已經存在，點擊保存聯系人案例的時候，就會失敗，我們給保存聯系人的按鈕添加一個自定義屬性用來標識當前添加的聯系人是否存在
$("#saveEmp").attr("isUserExist","yes");
}else{
//說明該聯系人可用
$("#empNameModal").parent().removeClass("has-success has-error");
$("#name_span").text("");
//給當前節點的父元素添加has-error屬性
$("#empNameModal").parent().addClass("has-success");
//給span節點添加.help-block屬性
$("#name_span").addClass("help-block").text("該聯系人可用");
$("#saveEmp").attr("isUserExist","no");
}
}
});
});
//給編輯按鈕添加點擊事件
$(document).on("click",".edit_btn",function(){
//彈出模態對話框
//首先清空頁面的所有數據
//將jquery對象轉化成docment對象，調用docment對象的reset方法
$("#updateEmpModal form")[0].reset();
$("#name_span_update").text("");
$("#email_span_update").text("");
$("#empNameModalUpdate").parent().removeClass("has-success has-error");
$("#emailModalUpdate").parent().removeClass("has-success has-error");
//發送ajax請求獲得對應的部門信息
var parent = $("#dIdModalUpdate");
//使用ajax請求部門的數據
$.ajax(
{
url:"${APP_PATH}/depts",
type:"GET",
success:function(result){
//對result數據進行解析添加到
var depts = result.extend.depts;
$.each(depts,function(index,item){
//給option選項設置值應該是deptid
var opt = $("<option></option>").append(item.deptName).attr("value",item.deptId);
parent.append(opt);
});
}
}
);
//彈出對話框
$('#updateEmpModal').modal({
backdrop:'static'
})
});
</script>
</div>
</body>
</html>
相當的經典
29、尚硅谷_SSM高級整合_修改_回顯員工信息.avi
上面我們實現了當點擊編輯按鈕的時候彈出了一個模態對話框，但是上面還沒有顯示需要編輯的聯系人的信息，接下我們實現該功能
這里我們點擊編輯按鈕的時候，在彈出編輯對話框之前我們要使用ajax到后台去查詢對應的員工的信息，這里需要點擊編輯按鈕的時候，需要得到被修改員工的id，這里設計的比較巧秒，我們在創建出編輯按鈕的時候，給編輯按鈕添加一個自定義的屬性。該屬性值就是員工的id
在點擊編輯按鈕的時候我們就可以通過該屬性獲得的該員工的id
相當的經典
接下面我們在修改頁面我們讓該員工的姓名不能被修改，我們要替換下name這邊的樣式不能在使用
<input type="text" name="empName" class="form-control" id="empNameModalUpdate" placeholder="name">
input對話框了，而應該使用下面的這種形式的
<p class="form-control-static" id="empNameModalUpdate"></p>
接下來我們來看對應的代碼
EmployeeController.java
package com.atguigu.crud.controller;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.validation.Valid;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.validation.FieldError;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import com.atguigu.crud.bean.Employee;
import com.atguigu.crud.bean.Msg;
import com.atguigu.crud.dao.EmployeeMapper;
import com.atguigu.crud.service.EmployeeService;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
/**
*
* 處理員工的增刪改查操作
* */
@Controller
public class EmployeeController {
@Autowired
private EmployeeService employeeService;
/**
* 負責將PageInfo對象轉化成json對象
* */
@RequestMapping("/emps")
@ResponseBody
public Msg getEmpsWithJson(@RequestParam(value="pn",defaultValue ="1") Integer pn) {
//使用mybatis分頁插件 pn表示當前查詢的頁數，5表示每頁顯示第幾條
System.out.println("EmployeeController is called pn"+pn);
PageHelper.startPage(pn, 5);
//在PageHelper.startPage(pn, 5);后面的查詢語句就可以實現分頁查詢
List<Employee> list = employeeService.getAll();
//我們將查詢的結果封裝到PageInfo對象之中,5表示右下角導航欄的數目是5
PageInfo info = new PageInfo(list,5);
Msg msg = new Msg();
msg.setCode(100);
msg.setMsg("業務操作成功");
msg.getExtend().put("pageInfo", info);
return msg;
}
/**
* 這里一定要注意采用的resetful風格，請求方式必須是post
* */
@RequestMapping(value="/save",method=RequestMethod.POST)
@ResponseBody
public Msg save(@Valid Employee employee,BindingResult result){
System.out.println("save is calle:"+employee.toString());
//這里首先要判斷用戶輸入的參數是否合法
Map<String,Object> err_map = new HashMap<String, Object>();
Msg msg = new Msg();
if(result.hasErrors()){
List<FieldError> errors = result.getFieldErrors();
for( FieldError error: errors){
System.out.println("錯誤的字段是："+error.getField());
System.out.println("錯誤的消息是："+error.getDefaultMessage());
err_map.put(error.getField(), error.getDefaultMessage());
}
msg.setCode(200);
msg.setMsg("員工保存失敗");
msg.getExtend().put("err_map", err_map);
}else{
employeeService.save(employee);
msg.setCode(100);
msg.setMsg("保存員工數據成功");
}
return msg;
}
@RequestMapping("/isUserExist")
@ResponseBody
public Msg isUserExist(@RequestParam("empName") String empName){
System.out.println("isUserExist is called:"+empName);
Msg msg = new Msg();
Boolean exits = employeeService.isUserExist(empName);
if(exits){
//200表示聯系人已經存在
msg.setCode(200);
}else{
//100表示聯系人可用
msg.setCode(100);
}
return msg;
}
//通過id查詢到員工的信息，采用resetful風格
@RequestMapping(value="/emp/{id}",method=RequestMethod.GET)
@ResponseBody
public Msg getEmpById(@PathVariable("id") String id){
System.out.println("getEmpById is called:"+id);
Msg msg = new Msg();
Employee employee = employeeService.getEmpById(id);
msg.setCode(100);
msg.setMsg("查詢聯系人成功");
msg.getExtend().put("emp", employee);
return msg;
}
}
EmployeeService.java
package com.atguigu.crud.service;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.atguigu.crud.bean.Employee;
import com.atguigu.crud.bean.EmployeeExample;
import com.atguigu.crud.bean.EmployeeExample.Criteria;
import com.atguigu.crud.dao.EmployeeMapper;
@Service
public class EmployeeService {
@Autowired
private EmployeeMapper employeeMapper;
public List<Employee> getAll(){
List<Employee> list = employeeMapper.selectByExampleWithDept(null);
return list;
}
public void save(Employee employee) {
// TODO Auto-generated method stub
//這里要注意insert和insertSelevite的區別，使用insert將會null字段插入到數據庫中。insertselct不會
//現在要實現員工的id自增長，employee中的id字段傳遞過來的值是null字段，所以不能使用insert，會將null字段插入
employeeMapper.insertSelective(employee);
}
public Boolean isUserExist(String empName) {
// TODO Auto-generated method stub
//采用mybatis的高級查找功能，判斷當前用戶是否存在
/***
* MyBatis的Mapper接口以及Example的實例函數及詳解
* mybatis的逆向工程中會生成實例及實例對應的example，example用於添加條件，相當where后面的部分
xxxExample example = new xxxExample();
Criteria criteria = new Example().createCriteria();
User user = XxxMapper.selectByPrimaryKey(100); //相當於select * from user where id = 100
* */
EmployeeExample example = new EmployeeExample();
Criteria createCriteria = example.createCriteria();
createCriteria.andEmpNameEqualTo(empName);
long countByExample = employeeMapper.countByExample(example);
if(countByExample > 0){
return true;
}else{
return false;
}
}
public Employee getEmpById(String id) {
// TODO Auto-generated method stub
Employee employee = employeeMapper.selectByPrimaryKey(Integer.parseInt(id));
return employee;
}
}
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>員工列表</title>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- web路徑：
不以/開始的相對路徑，找資源，以當前資源的路徑為基准，經常容易出問題。
以/開始的相對路徑，找資源，以服務器的路徑為標准(http://localhost:3306)；需要加上項目名
http://localhost:3306/crud
-->
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-2.1.1.js"></script>
<link href="${APP_PATH }/static/bootstrap-3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="${APP_PATH}/static/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 修改員工信息的對話框 -->
<div class="modal fade" id="updateEmpModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">修改員工</h4>
</div>
<div class="modal-body">
<!-- 實體類的表單,表單項 的name需要給實體bean對象的一一對應起來，springmvc會幫我們自動封裝-->
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<p class="form-control-static" id="empNameModalUpdate"></p>
<span id="name_span_update" class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">郵箱</label>
<div class="col-sm-10">
<input type="text" name="email" class="form-control" id="emailModalUpdate" placeholder="eamil">
<span id="email_span_update" class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">性別</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="gender" id="genderModal" value="F"> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="genderModal" value="M"> 女
</label>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">部門</label>
<div class="col-sm-5">
<select name="dId" id="dIdModalUpdate"class="form-control">
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id ="saveEmp">更新</button>
</div>
</div>
</div>
</div>
<!-- 新增員工信息的對話框 -->
<div class="modal fade" id="addEmpModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">新增員工</h4>
</div>
<div class="modal-body">
<!-- 實體類的表單,表單項 的name需要給實體bean對象的一一對應起來，springmvc會幫我們自動封裝-->
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="text" name="empName" class="form-control" id="empNameModal" placeholder="name">
<span id="name_span" class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">郵箱</label>
<div class="col-sm-10">
<input type="text" name="email" class="form-control" id="emailModal" placeholder="eamil">
<span id="email_span" class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">性別</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="gender" id="genderModal" value="F"> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="genderModal" value="M"> 女
</label>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">部門</label>
<div class="col-sm-5">
<select name="dId" id="dIdModal"class="form-control">
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id ="saveEmp">保存</button>
</div>
</div>
</div>
</div>
<!-- 搭建顯示頁面 -->
<div class="container">
<!-- 標題 -->
<div class="row">
<div class="col-md-12">
<h1>SSM-CRUD</h1>
</div>
</div>
<!-- 按鈕 -->
<div class="row">
<div class="col-md-4 col-md-offset-8">
<button class="btn btn-primary" id="addEmp">新增</button>
<button class="btn btn-danger">刪除</button>
</div>
</div>
<!-- 顯示表格數據 -->
<div class="row">
<div class="col-md-12">
<table class="table table-hover" id="emps_table">
<thead>
<tr>
<th>#</th>
<th>empName</th>
<th>gender</th>
<th>email</th>
<th>deptName</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<!-- 顯示分頁信息 -->
<div class="row">
<!--分頁文字信息 -->
<div class="col-md-6" id="page_info_area"></div>
<!-- 分頁條信息 -->
<div class="col-md-6" id="page_nav_area"></div>
</div>
</div>
<!-- 當頁面加載完成之后發起ajax請求獲得數據 ，不清楚的看鋒利jquery教程相當的經典-->
<script type="text/javascript">
//定義一個全局變量，獲得當前中的記錄數
var total;
$(function(){
//頁面加載完畢，去首頁獲得對應的數據
to_page(1);
});
//使用ajax到后台服務器查詢數據
function to_page(pn){
$.ajax({
url:"${APP_PATH}/emps",
data:"pn="+pn,
type:"GET",
success:function(result){
//console.log(result);
//1、解析並顯示員工數據
build_emps_table(result);
//2、解析並顯示分頁信息
build_page_info(result);
//3、解析顯示分頁條數據
build_page_nav(result);
}
});
}
//解析服務器返回的json數據，並在員工表中顯示出來
function build_emps_table(result){
//在構建之前先清空所有的數據
$("#emps_table tbody").empty();
//第一步：獲得所有的員工數據
var emps = result.extend.pageInfo.list;
//第二步：對員工數據進行遍歷顯示出來
$.each(emps,function(index,item){
var empIdTd = $("<td></td>").append(item.empId);
var empNameTd = $("<td></td>").append(item.empName);
var gender = item.gender == 'M'?"男":"女";
var genderTd = $("<td></td>").append(gender);
var emailTd = $("<td></td>").append(item.email);
var departmentNameTd = $("<td></td>").append(item.department.deptName);
//添加編輯按鈕
var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
.append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("編輯");
var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
.append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("刪除");
var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
//這里我們點擊編輯按鈕的時候，在彈出編輯對話框之前我們要使用ajax到后台去查詢對應的員工的信息，這里需要點擊編輯按鈕的時候，需要得到被修改員工的id，這里設計的比較巧秒，我們在創建出編輯按鈕的時候，給編輯按鈕添加一個自定義的屬性。該屬性值就是員工的id
// 在點擊編輯按鈕的時候我們就可以通過該屬性獲得的該員工的id
editBtn.attr("edit_id",item.empId);
//將上面的table表td數據添加到tr中，這里是一個鏈式操作
$("<tr></tr>").append(empIdTd)
.append(empNameTd)
.append(genderTd)
.append(emailTd)
.append(departmentNameTd)
.append(btnTd)
.appendTo("#emps_table tbody");
//"#emps_table tbody"表示選取id為emps_table下的所有的<tbody>的元素，不清楚的看鋒利的jquery書籍相當的經典
});
}
//解析顯示分頁信息
function build_page_info(result){
$("#page_info_area").empty();
$("#page_info_area").append("當前第"+result.extend.pageInfo.pageNum+"頁,"+"總共"+result.extend.pageInfo.pages+"頁,"+"總共"+
result.extend.pageInfo.total+"條記錄");
total = result.extend.pageInfo.total;
}
//解析右下角的導航欄
function build_page_nav(result){
//page_nav_area
$("#page_nav_area").empty();
var ul = $("<ul></ul>").addClass("pagination");
//構建元素
var firstPageLi = $("<li></li>").append($("<a></a>").append("首頁").attr("href","#"));
var prePageLi = $("<li></li>").append($("<a></a>").append("«"));
//判斷是否有前一頁，如果沒有前一頁就不能點擊
if(result.extend.pageInfo.hasPreviousPage == false){
firstPageLi.addClass("disabled");
prePageLi.addClass("disabled");
}
//給前一頁和首頁添加按鈕點擊事件
firstPageLi.click(function(){
to_page(1);
});
prePageLi.click(function(){
//跳轉到當前頁的前一頁
to_page(result.extend.pageInfo.pageNum-1);
});
var nextPageLi = $("<li></li>").append($("<a></a>").append("»"));
var lastPageLi = $("<li></li>").append($("<a></a>").append("末頁").attr("href","#"));
//如果沒有下一頁不能被點擊
if(result.extend.pageInfo.hasNextPage == false){
nextPageLi.addClass("disabled");
lastPageLi.addClass("disabled");
}
//給下一頁和尾頁添加點擊事件
nextPageLi.click(function(){
to_page(result.extend.pageInfo.pageNum+1);
});
lastPageLi.click(function(){
to_page(result.extend.pageInfo.pages);
});
//添加首頁和前一頁 的提示
ul.append(firstPageLi).append(prePageLi);
//1,2，3遍歷給ul中添加頁碼提示
$.each(result.extend.pageInfo.navigatepageNums,function(index,item){
var numLi = $("<li></li>").append($("<a></a>").append(item));
//判斷當前遍歷的如果是當前正在顯示的頁面，應該高亮顯示
if(result.extend.pageInfo.pageNum == item){
numLi.addClass("active");
}
//添加點擊事件
numLi.click(function(){
//點擊的時候重新使用ajax到服務器查詢數據
to_page(item);
});
ul.append(numLi);
});
//添加下一頁和末頁 的提示
ul.append(nextPageLi).append(lastPageLi);
//把ul加入到nav
var navEle = $("<nav></nav>").append(ul);
navEle.appendTo("#page_nav_area");
}
//點擊新增按鈕，彈出新增加員工的對話框
$("#addEmp").click(function(){
//首先清空頁面的所有數據
//將jquery對象轉化成docment對象，調用docment對象的reset方法
$("#addEmpModal form")[0].reset();
$("#name_span").text("");
$("#empNameModal").parent().removeClass("has-success has-error");
var parent = $("#dIdModal");
//使用ajax請求部門的數據
$.ajax(
{
url:"${APP_PATH}/depts",
type:"GET",
success:function(result){
//對result數據進行解析添加到
var depts = result.extend.depts;
$.each(depts,function(index,item){
//給option選項設置值應該是deptid
var opt = $("<option></option>").append(item.deptName).attr("value",item.deptId);
parent.append(opt);
});
}
}
);
//彈出對話框
$('#addEmpModal').modal({
backdrop:'static'
})
});
//點擊保存聯系人
$("#saveEmp").click(function(){
//判斷當前的聯系人是否可用
if( $(this).attr("isUserExist")=="yes"){
return false;
}
//首先判斷輸入的參數是否滿足規則
if(!validate_add_form()){
return false;
}
$.ajax({
url:"${APP_PATH}/save",
data:$("#addEmpModal form").serialize(),
type:"post",
success:function(result){
//首先需要判斷后端返回的結果中，后端對用戶的校驗結果
//alert(result.extend.err_map.email);
//alert(result.extend.err_map.empName);
//這里需要注意的是如果郵箱格式錯誤，姓名正確，result.extend.err_map.email中就像攜帶錯誤的信息，result.extend.err_map.empName的信息是undefined
if(result.code == 100){
//保存聯系人成功需要做下面的幾件事情
//第一件事情就是讓新建聯系人的對話框摸太框消失
$("#addEmpModal").modal('hide');
//第二個跳轉到最后一頁
//這里如何跳轉到最后一頁了，mybatis分頁插件這里提供了一個功能，例如現在員工總數是100人，每頁顯示5人，最大的分頁數目就是5，你如果輸入6
//也是按照最大的5來進行查詢。員工的總數肯定是大於最大的分頁數目的，現在要查詢最后一頁的數據，我以員工的總數進行查詢
//使用ajax重新再查詢下最后一頁員工的數目
//
to_page(total);
}else{
alert(result.extend.err_map.email);
//說明郵箱格式錯誤
if(undefined != result.extend.err_map.email){
alert(result.extend.err_map.email);
$("#emailModal").parent().removeClass("has-success has-error");
$("#email_span").text("");
$("#emailModal").parent().addClass("has-error");
//給span節點添加.help-block屬性
$("#email_span").addClass("help-block").text(result.extend.err_map.email);
}
//說明姓名格式有錯誤
if(undefined != result.extend.err_map.empName){
//添加元素狀態之前。先清空清除當前元素的校驗狀態
$("#empNameModal").parent().removeClass("has-success has-error");
$("#name_span").text("");
//給當前節點的父元素添加has-error屬性
$("#empNameModal").parent().addClass("has-error");
//給span節點添加.help-block屬性
$("#name_span").addClass("help-block").text(result.extend.err_map.empName);
}
}
}
});
});
//juqery前台校驗數據
//校驗表單數據
function validate_add_form(){
//1、拿到要校驗的數據，使用正則表達式
var empName = $("#empNameModal").val();
var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
if(!regName.test(empName)){
//添加元素狀態之前。先清空清除當前元素的校驗狀態
$("#empNameModal").parent().removeClass("has-success has-error");
$("#name_span").text("");
//給當前節點的父元素添加has-error屬性
$("#empNameModal").parent().addClass("has-error");
//給span節點添加.help-block屬性
$("#name_span").addClass("help-block").text("姓名格式不正確");
return false;
}else{
$("#empNameModal").parent().removeClass("has-success has-error");
$("#name_span").text("");
//給當前節點的父元素添加has-error屬性
$("#empNameModal").parent().addClass("has-success");
//給span節點添加.help-block屬性
$("#name_span").addClass("help-block").text("");
};
//2、校驗郵箱信息
var email = $("#emailModal").val();
var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
if(!regEmail.test(email)){
$("#emailModal").parent().removeClass("has-success has-error");
$("#email_span").text("");
$("#emailModal").parent().addClass("has-error");
//給span節點添加.help-block屬性
$("#email_span").addClass("help-block").text("郵箱格式不正確");
return false;
}else{
$("#emailModal").parent().removeClass("has-success has-error");
$("#email_span").text("");
$("#emailModal").parent().addClass("has-success");
//給span節點添加.help-block屬性
$("#email_span").addClass("help-block").text("");
}
return true;
}
//給輸入聯系人的input添加change事件，判斷當前聯系人是否可用
$("#empNameModal").change(function(){
//this表示當前操作的對象，是docment類型
//獲得當前輸入的name的值
var name=$(this).val();
$.ajax({
url:"${APP_PATH}/isUserExist",
type:"post",
data:"empName="+name,
success:function(result){
if(result.code == 200){
//說明該聯系人已經在后台存在不可以
//添加元素狀態之前。先清空清除當前元素的校驗狀態
$("#empNameModal").parent().removeClass("has-success has-error");
$("#name_span").text("");
//給當前節點的父元素添加has-error屬性
$("#empNameModal").parent().addClass("has-error");
//給span節點添加.help-block屬性
$("#name_span").addClass("help-block").text("該聯系人已經存在");
//如果當前聯系人已經存在，點擊保存聯系人案例的時候，就會失敗，我們給保存聯系人的按鈕添加一個自定義屬性用來標識當前添加的聯系人是否存在
$("#saveEmp").attr("isUserExist","yes");
}else{
//說明該聯系人可用
$("#empNameModal").parent().removeClass("has-success has-error");
$("#name_span").text("");
//給當前節點的父元素添加has-error屬性
$("#empNameModal").parent().addClass("has-success");
//給span節點添加.help-block屬性
$("#name_span").addClass("help-block").text("該聯系人可用");
$("#saveEmp").attr("isUserExist","no");
}
}
});
});
//給編輯按鈕添加點擊事件
$(document).on("click",".edit_btn",function(){
//彈出模態對話框
//首先清空頁面的所有數據
//將jquery對象轉化成docment對象，調用docment對象的reset方法
$("#updateEmpModal form")[0].reset();
$("#name_span_update").text("");
$("#email_span_update").text("");
$("#empNameModalUpdate").parent().removeClass("has-success has-error");
$("#emailModalUpdate").parent().removeClass("has-success has-error");
//發送ajax請求獲得對應的部門信息
var parent = $("#dIdModalUpdate");
//使用ajax請求部門的數據
$.ajax(
{
url:"${APP_PATH}/depts",
type:"GET",
success:function(result){
//對result數據進行解析添加到
var depts = result.extend.depts;
$.each(depts,function(index,item){
//給option選項設置值應該是deptid
var opt = $("<option></option>").append(item.deptName).attr("value",item.deptId);
parent.append(opt);
});
}
}
);
//使用ajax請求獲得對應的員工信息
var emp_id = $(this).attr("edit_id");
$.ajax(
{
url:"${APP_PATH}/emp/"+emp_id,
type:"GET",
success:function(result){
//在對話框中顯示顯示姓名 p標簽是一個文本使用text
$("#empNameModalUpdate").text(result.extend.emp.empName);
//給郵箱復制，input對話框使用val
$("#emailModalUpdate").val(result.extend.emp.email);
//接下來要讓該聯系人對應的性別被選中，如何實現了
//首先找到id為updateEmpModal對話框下的name等於gender的input元素。這個元素就是單選框。val中傳入的值就是男就是對應的
//男的單選框被選中
$("#updateEmpModal input[name=gender]").val([result.extend.emp.gender]);
$("#updateEmpModal select").val([result.extend.emp.dId]);
}
}
);
//彈出對話框
$('#updateEmpModal').modal({
backdrop:'static'
})
});
</script>
</div>
</body>
</html>
30、尚硅谷_SSM高級整合_修改_Ajax發送PUT請求引發的血案.avi
接下來我們要實現下面的功能。當點擊修改聯系人的保存按鈕的時候，我們需要使用ajax的方式將數據攜帶到后端進行保存
這里有下面的幾個知識點需要強調和注意的地方：
保存聯系人的時候我們使用的是：
updateByPrimaryKeySelective
int updateByPrimaryKeySelective(TbItem record);
int updateByPrimaryKey(TbItem record);
上面的是逆轉工程生成的Mapper接口
updateByPrimaryKeySelective會對字段進行判斷再更新(如果為Null就忽略更新)，如果你只想更新某一字段，可以用這個方法。
updateByPrimaryKey對你注入的字段全部更新，即使對應的字段為null字段
第二個需要注意的地方：
在編輯聯系人的按鈕中可以獲得當前聯系人的id，我們可以在點擊編輯聯系人按鈕的時候，將當前的聯系人id值賦值給修改聯系人頁面中的更新按鈕中，給更新按鈕添加一個自定義的屬性值，該屬性值就是聯系人的id，這樣在更新聯系人頁面，通過從更新按鈕的自定義屬性中我們就可以獲得更新聯系人的id
通過這個視頻教程，我們明白了使用給按鈕添加自定義屬性來代替使用全局變量，相當的經典
第二點：需要注意的，我們更新聯系人的時候采用的是restfu風格emp/id的方式來更新聯系人，必須采用put方式提交，在springmvc中
Spring Mvc將Get和Post請求轉為Delete和Put請求
不清楚的看上硅谷spring mvc的視頻教程相當的經典
不說那么多介紹了，什么restful風格url什么的！直接開始。
在web.xml文件中配置
<!-- 配置 HiddenHttpMethodFilter: 把 POST 請求轉為 DELETE、PUT 請求 -->
<filter>
<filter-name>HiddenHttpMethodFilter</filter-name>
<filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>HiddenHttpMethodFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
第二點：
3.在springMvc配置文件中配置靜態資源
<!--靜態資源交給默認的Servlet-->
<mvc:default-servlet-handler/>
<mvc:annotation-driven></mvc:annotation-driven>
第三點
將Get請求轉為Delete請求
<!--一個刪除鏈接，為get請求-->
<a class="delete" href="emp/${emp.id}">Delete</a>
<!--利用js,將get請求轉為DELETE請求-->
<script type="text/javascript">
$(function() {
alert("hello");
$(".delete").click(function(){
var href=$(this).attr("href");
$("form").attr("action",href).submit();
return false;
});
});
</script>
<!--DELETE請求細節-->
<form action="" method="POST">
<input type="hidden" name="_method" value="DELETE" >
</form>
<!--接收DELETE請求的細節-->
@RequestMapping(value="/emp/{id}",method=RequestMethod.DELETE)
public String delete(@PathVariable("id") Integer id){
System.out.print(employeeDao.delete(id));
return "redirect:/emps";
}
這里我們來詳細分析下，不清楚的看springmvc 上硅谷的視頻教程，首先要講get方式轉換成delete，我們現在頁面中添加一個表單，給表單添加一個input ，springmvc 規定必須攜帶一個name為_method的屬性，對於的value值
就是你要轉換的字段這里是DELET，將get轉換成delete
當我們點擊a標簽的時候，首先獲得a標簽中屬性是href的值，將該值賦值給form表單標簽的action屬性，主要表單form的method必須是post，實際上當你點擊a標簽的時候，實際上提交的是form標簽，實現了將方式轉換成restful方式的DELETE
5.Post請求轉為Put請求
<form:form action="${pageContext.request.contextPath}/emp" method="POST"
modelAttribute="employee"><br>
<c:if test="${employee.id == null }">
<!-- path 屬性對應 html 表單標簽的 name 屬性值 -->
LastName: <form:input path="lastName"/>
<form:errors path="lastName"></form:errors>
</c:if>
<c:if test="${employee.id != null }">
<form:hidden path="id"/>
<!-- 將POST請求轉化為PUT請求 -->
<input type="hidden" name="_method" value="PUT"/>
</c:if>
<br>
Email: <form:input path="email"/>
<input type="submit" value="Submit"/>
</form:form>
上面的表單標簽使用的是spring mvc的表單標簽，<form:hidden path="id"/>表示隱藏提交一個id字段的屬性值，那現在要講post方式轉換成delete方式，能不能寫成下面的形式了
<form:hidden name="_method" value="PUT" path="id"/>
是不行的，因為spring mvc 的hidden標簽中<form:hidden>沒有name字段，只能在還表單中再添加一個input
<input type="hidden" name="_method" value="PUT"/>
這種形式，相當的經典
我們在代碼中我們使用ajax將post轉換成put方式的原理同上面的分析
其實ajax也可以直接發送put請求
//給編輯聯系人的保存按鈕增加點擊事件
$("#saveEmpUpdate").click(function(){
//使用ajax提交數據到后台更新數據這里需要
//強調的是我們采用的是put方式的提交
// data:$("#addEmpModal form").serialize()傳遞的請求參數中必須攜帶一個_method
var emp_id = $(this).attr("edit_id");
$.ajax({
url:"${APP_PATH}/update/"+emp_id,
type:"PUT",
data:$("#addEmpModal form").serialize(),
success:function(result){
alert("kskkfd");
}
});
});
但是除了在web.xml配置了
<filter>
<filter-name>hidden</filter-name>
<filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>hidden</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<filter>
還需要添加下面的配置
<!-- 配置HttpPutFormContentFilter支持ajax直接發送put請求 -->
<filter-name>HttpMethodFilter</filter-name>
<filter-class>org.springframework.web.filter.HttpPutFormContentFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>HttpMethodFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
我們來看整個web.xml文件
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>SSM</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<!-- 配置中文亂碼問題 ，字符編碼必須放在所以過濾器之前-->
<filter>
<filter-name>characterEncodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
<init-param>
<param-name>forceEncoding</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>characterEncodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<!-- 為了支持restful風格，需要配置下面的filter -->
<filter>
<filter-name>hidden</filter-name>
<filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>hidden</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<filter>
<!-- 配置HttpPutFormContentFilter支持ajax直接發送put請求 -->
<filter-name>HttpMethodFilter</filter-name>
<filter-class>org.springframework.web.filter.HttpPutFormContentFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>HttpMethodFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<!-- 配置spring 的啟動文件 -->
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext.xml</param-value>
</context-param>
<!-- 配置springmvc的配置文件 -->
<servlet>
<servlet-name>DispatcherServlet</servlet-name><!--在DispatcherServlet的初始化過程中，框架會在web應用的 WEB-INF文件夾下尋找名為[servlet-name]-servlet.xml 的配置文件，生成文件中定義的bean。-->
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<!--指明了配置文件的文件名，不使用默認配置文件名，而使用dispatcher-servlet.xml配置文件。-->
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:dispatcher-servlet.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>DispatcherServlet</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app>
這里我們要強調下：characterEncodingFilter要保證有效必須放在所有的過濾器之前；
第二：HiddenHttpMethodFilter必須作用於DispatcherServlet前，才有效果，所有在xml中我們最好按照先配置filter在配置servlet的順序進行配置
最后一點需要注意的：
在控制類中：
@RequestMapping(value="/update/{empId}",method=RequestMethod.PUT)
@ResponseBody
public Msg updateEmpById(Employee employee){
System.out.println("updateEmpById is called:"+employee.toString());
Msg msg = new Msg();
employeeService.updateEmpById(employee);
msg.setCode(100);
msg.setMsg("更新數據成功");
return msg;
}
我們采用PUT方式的請求，springmvc會自動的將提交的參數封裝成我們對於的Employee employee對象中的值，但是我們在頁面提交的時候沒有提交修改聯系人的id，這里employee如何獲得修改聯系人的id了，主要是這個地方
@RequestMapping(value="/update/{empId}"中攜帶了請求的參數，如果這里empId和實體bean的字段一一對象，springmvc會自動給我們進行封裝，這里我們就獲得對應的修改聯系人的id
@RequestMapping(value="/update/{id}"這里是id，而實體對象中是empId二者不對應，這里spring mvc就不會給我們自動封裝了，這里是一個小細節。
當然除了這種方式之外，還可以使用 @ModelAttribute來解決不清楚的看springmvc的視頻
我們來看看具體的代碼
EmployeeController.java
package com.atguigu.crud.controller;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.validation.Valid;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.validation.FieldError;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import com.atguigu.crud.bean.Employee;
import com.atguigu.crud.bean.Msg;
import com.atguigu.crud.dao.EmployeeMapper;
import com.atguigu.crud.service.EmployeeService;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
/**
*
* 處理員工的增刪改查操作
* */
@Controller
public class EmployeeController {
@Autowired
private EmployeeService employeeService;
/**
* 負責將PageInfo對象轉化成json對象
* */
@RequestMapping("/emps")
@ResponseBody
public Msg getEmpsWithJson(@RequestParam(value="pn",defaultValue ="1") Integer pn) {
//使用mybatis分頁插件 pn表示當前查詢的頁數，5表示每頁顯示第幾條
System.out.println("EmployeeController is called pn"+pn);
PageHelper.startPage(pn, 5);
//在PageHelper.startPage(pn, 5);后面的查詢語句就可以實現分頁查詢
List<Employee> list = employeeService.getAll();
//我們將查詢的結果封裝到PageInfo對象之中,5表示右下角導航欄的數目是5
PageInfo info = new PageInfo(list,5);
Msg msg = new Msg();
msg.setCode(100);
msg.setMsg("業務操作成功");
msg.getExtend().put("pageInfo", info);
return msg;
}
/**
* 這里一定要注意采用的resetful風格，請求方式必須是post
* */
@RequestMapping(value="/save",method=RequestMethod.POST)
@ResponseBody
public Msg save(@Valid Employee employee,BindingResult result){
System.out.println("save is calle:"+employee.toString());
//這里首先要判斷用戶輸入的參數是否合法
Map<String,Object> err_map = new HashMap<String, Object>();
Msg msg = new Msg();
if(result.hasErrors()){
List<FieldError> errors = result.getFieldErrors();
for( FieldError error: errors){
System.out.println("錯誤的字段是："+error.getField());
System.out.println("錯誤的消息是："+error.getDefaultMessage());
err_map.put(error.getField(), error.getDefaultMessage());
}
msg.setCode(200);
msg.setMsg("員工保存失敗");
msg.getExtend().put("err_map", err_map);
}else{
employeeService.save(employee);
msg.setCode(100);
msg.setMsg("保存員工數據成功");
}
return msg;
}
@RequestMapping("/isUserExist")
@ResponseBody
public Msg isUserExist(@RequestParam("empName") String empName){
System.out.println("isUserExist is called:"+empName);
Msg msg = new Msg();
Boolean exits = employeeService.isUserExist(empName);
if(exits){
//200表示聯系人已經存在
msg.setCode(200);
}else{
//100表示聯系人可用
msg.setCode(100);
}
return msg;
}
//通過id查詢到員工的信息，采用resetful風格
@RequestMapping(value="/emp/{id}",method=RequestMethod.GET)
@ResponseBody
public Msg getEmpById(@PathVariable("id") String id){
System.out.println("getEmpById is called:"+id);
Msg msg = new Msg();
Employee employee = employeeService.getEmpById(id);
msg.setCode(100);
msg.setMsg("查詢聯系人成功");
msg.getExtend().put("emp", employee);
return msg;
}
//通過id修改聯系人,特別需要注意的是這里采用的是PUT的方式
@RequestMapping(value="/update/{empId}",method=RequestMethod.PUT)
@ResponseBody
public Msg updateEmpById(Employee employee){
System.out.println("updateEmpById is called:"+employee.toString());
Msg msg = new Msg();
employeeService.updateEmpById(employee);
msg.setCode(100);
msg.setMsg("更新數據成功");
return msg;
}
}
EmployeeService.java
package com.atguigu.crud.service;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.atguigu.crud.bean.Employee;
import com.atguigu.crud.bean.EmployeeExample;
import com.atguigu.crud.bean.EmployeeExample.Criteria;
import com.atguigu.crud.dao.EmployeeMapper;
@Service
public class EmployeeService {
@Autowired
private EmployeeMapper employeeMapper;
public List<Employee> getAll(){
List<Employee> list = employeeMapper.selectByExampleWithDept(null);
return list;
}
public void save(Employee employee) {
// TODO Auto-generated method stub
//這里要注意insert和insertSelevite的區別，使用insert將會null字段插入到數據庫中。insertselct不會
//現在要實現員工的id自增長，employee中的id字段傳遞過來的值是null字段，所以不能使用insert，會將null字段插入
employeeMapper.insertSelective(employee);
}
public Boolean isUserExist(String empName) {
// TODO Auto-generated method stub
//采用mybatis的高級查找功能，判斷當前用戶是否存在
/***
* MyBatis的Mapper接口以及Example的實例函數及詳解
* mybatis的逆向工程中會生成實例及實例對應的example，example用於添加條件，相當where后面的部分
xxxExample example = new xxxExample();
Criteria criteria = new Example().createCriteria();
User user = XxxMapper.selectByPrimaryKey(100); //相當於select * from user where id = 100
* */
EmployeeExample example = new EmployeeExample();
Criteria createCriteria = example.createCriteria();
createCriteria.andEmpNameEqualTo(empName);
long countByExample = employeeMapper.countByExample(example);
if(countByExample > 0){
return true;
}else{
return false;
}
}
public Employee getEmpById(String id) {
// TODO Auto-generated method stub
Employee employee = employeeMapper.selectByPrimaryKey(Integer.parseInt(id));
return employee;
}
public void updateEmpById(Employee employee) {
// TODO Auto-generated method stub
//這里Employee字段中攜帶的那些字段的存在值就更新那些字段
//
employeeMapper.updateByPrimaryKeySelective(employee);
}
}
index.sjp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>員工列表</title>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- web路徑：
不以/開始的相對路徑，找資源，以當前資源的路徑為基准，經常容易出問題。
以/開始的相對路徑，找資源，以服務器的路徑為標准(http://localhost:3306)；需要加上項目名
http://localhost:3306/crud
-->
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-2.1.1.js"></script>
<link href="${APP_PATH }/static/bootstrap-3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="${APP_PATH}/static/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 修改員工信息的對話框 -->
<div class="modal fade" id="updateEmpModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">修改員工</h4>
</div>
<div class="modal-body">
<!-- 實體類的表單,表單項 的name需要給實體bean對象的一一對應起來，springmvc會幫我們自動封裝-->
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<p class="form-control-static" id="empNameModalUpdate" name="empName"></p>
<span id="name_span_update" class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">郵箱</label>
<div class="col-sm-10">
<input type="text" name="email" class="form-control" id="emailModalUpdate" placeholder="eamil">
<span id="email_span_update" class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">性別</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="gender" id="genderModal" value="F"> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="genderModal" value="M"> 女
</label>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">部門</label>
<div class="col-sm-5">
<select name="dId" id="dIdModalUpdate"class="form-control">
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id ="saveEmpUpdate">更新</button>
</div>
</div>
</div>
</div>
<!-- 新增員工信息的對話框 -->
<div class="modal fade" id="addEmpModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">新增員工</h4>
</div>
<div class="modal-body">
<!-- 實體類的表單,表單項 的name需要給實體bean對象的一一對應起來，springmvc會幫我們自動封裝-->
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="text" name="empName" class="form-control" id="empNameModal" placeholder="name">
<span id="name_span" class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">郵箱</label>
<div class="col-sm-10">
<input type="text" name="email" class="form-control" id="emailModal" placeholder="eamil">
<span id="email_span" class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">性別</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="gender" id="genderModal" value="F"> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="genderModal" value="M"> 女
</label>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">部門</label>
<div class="col-sm-5">
<select name="dId" id="dIdModal"class="form-control">
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id ="saveEmp">保存</button>
</div>
</div>
</div>
</div>
<!-- 搭建顯示頁面 -->
<div class="container">
<!-- 標題 -->
<div class="row">
<div class="col-md-12">
<h1>SSM-CRUD</h1>
</div>
</div>
<!-- 按鈕 -->
<div class="row">
<div class="col-md-4 col-md-offset-8">
<button class="btn btn-primary" id="addEmp">新增</button>
<button class="btn btn-danger">刪除</button>
</div>
</div>
<!-- 顯示表格數據 -->
<div class="row">
<div class="col-md-12">
<table class="table table-hover" id="emps_table">
<thead>
<tr>
<th>#</th>
<th>empName</th>
<th>gender</th>
<th>email</th>
<th>deptName</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<!-- 顯示分頁信息 -->
<div class="row">
<!--分頁文字信息 -->
<div class="col-md-6" id="page_info_area"></div>
<!-- 分頁條信息 -->
<div class="col-md-6" id="page_nav_area"></div>
</div>
</div>
<!-- 當頁面加載完成之后發起ajax請求獲得數據 ，不清楚的看鋒利jquery教程相當的經典-->
<script type="text/javascript">
//定義一個全局變量，獲得當前中的記錄數
var total;
//定義一個全局變量，記錄當前修改的頁面
var currentPage;
$(function(){
//頁面加載完畢，去首頁獲得對應的數據
to_page(1);
});
//使用ajax到后台服務器查詢數據
function to_page(pn){
$.ajax({
url:"${APP_PATH}/emps",
data:"pn="+pn,
type:"GET",
success:function(result){
//console.log(result);
//1、解析並顯示員工數據
build_emps_table(result);
//2、解析並顯示分頁信息
build_page_info(result);
//3、解析顯示分頁條數據
build_page_nav(result);
}
});
}
//解析服務器返回的json數據，並在員工表中顯示出來
function build_emps_table(result){
//在構建之前先清空所有的數據
$("#emps_table tbody").empty();
//第一步：獲得所有的員工數據
var emps = result.extend.pageInfo.list;
//第二步：對員工數據進行遍歷顯示出來
$.each(emps,function(index,item){
var empIdTd = $("<td></td>").append(item.empId);
var empNameTd = $("<td></td>").append(item.empName);
var gender = item.gender == 'M'?"女":"男";
var genderTd = $("<td></td>").append(gender);
var emailTd = $("<td></td>").append(item.email);
var departmentNameTd = $("<td></td>").append(item.department.deptName);
//添加編輯按鈕
var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
.append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("編輯");
var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
.append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("刪除");
var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
//這里我們點擊編輯按鈕的時候，在彈出編輯對話框之前我們要使用ajax到后台去查詢對應的員工的信息，這里需要點擊編輯按鈕的時候，需要得到被修改員工的id，這里設計的比較巧秒，我們在創建出編輯按鈕的時候，給編輯按鈕添加一個自定義的屬性。該屬性值就是員工的id
// 在點擊編輯按鈕的時候我們就可以通過該屬性獲得的該員工的id
editBtn.attr("edit_id",item.empId);
//將上面的table表td數據添加到tr中，這里是一個鏈式操作
$("<tr></tr>").append(empIdTd)
.append(empNameTd)
.append(genderTd)
.append(emailTd)
.append(departmentNameTd)
.append(btnTd)
.appendTo("#emps_table tbody");
//"#emps_table tbody"表示選取id為emps_table下的所有的<tbody>的元素，不清楚的看鋒利的jquery書籍相當的經典
});
}
//解析顯示分頁信息
function build_page_info(result){
$("#page_info_area").empty();
$("#page_info_area").append("當前第"+result.extend.pageInfo.pageNum+"頁,"+"總共"+result.extend.pageInfo.pages+"頁,"+"總共"+
result.extend.pageInfo.total+"條記錄");
total = result.extend.pageInfo.total;
currentPage = result.extend.pageInfo.pageNum;
}
//解析右下角的導航欄
function build_page_nav(result){
//page_nav_area
$("#page_nav_area").empty();
var ul = $("<ul></ul>").addClass("pagination");
//構建元素
var firstPageLi = $("<li></li>").append($("<a></a>").append("首頁").attr("href","#"));
var prePageLi = $("<li></li>").append($("<a></a>").append("«"));
//判斷是否有前一頁，如果沒有前一頁就不能點擊
if(result.extend.pageInfo.hasPreviousPage == false){
firstPageLi.addClass("disabled");
prePageLi.addClass("disabled");
}
//給前一頁和首頁添加按鈕點擊事件
firstPageLi.click(function(){
to_page(1);
});
prePageLi.click(function(){
//跳轉到當前頁的前一頁
to_page(result.extend.pageInfo.pageNum-1);
});
var nextPageLi = $("<li></li>").append($("<a></a>").append("»"));
var lastPageLi = $("<li></li>").append($("<a></a>").append("末頁").attr("href","#"));
//如果沒有下一頁不能被點擊
if(result.extend.pageInfo.hasNextPage == false){
nextPageLi.addClass("disabled");
lastPageLi.addClass("disabled");
}
//給下一頁和尾頁添加點擊事件
nextPageLi.click(function(){
to_page(result.extend.pageInfo.pageNum+1);
});
lastPageLi.click(function(){
to_page(result.extend.pageInfo.pages);
});
//添加首頁和前一頁 的提示
ul.append(firstPageLi).append(prePageLi);
//1,2，3遍歷給ul中添加頁碼提示
$.each(result.extend.pageInfo.navigatepageNums,function(index,item){
var numLi = $("<li></li>").append($("<a></a>").append(item));
//判斷當前遍歷的如果是當前正在顯示的頁面，應該高亮顯示
if(result.extend.pageInfo.pageNum == item){
numLi.addClass("active");
}
//添加點擊事件
numLi.click(function(){
//點擊的時候重新使用ajax到服務器查詢數據
to_page(item);
});
ul.append(numLi);
});
//添加下一頁和末頁 的提示
ul.append(nextPageLi).append(lastPageLi);
//把ul加入到nav
var navEle = $("<nav></nav>").append(ul);
navEle.appendTo("#page_nav_area");
}
//點擊新增按鈕，彈出新增加員工的對話框
$("#addEmp").click(function(){
//首先清空頁面的所有數據
//將jquery對象轉化成docment對象，調用docment對象的reset方法
$("#addEmpModal form")[0].reset();
$("#name_span").text("");
$("#empNameModal").parent().removeClass("has-success has-error");
$("#dIdModal").empty();
var parent = $("#dIdModal");
//使用ajax請求部門的數據
$.ajax(
{
url:"${APP_PATH}/depts",
type:"GET",
success:function(result){
//對result數據進行解析添加到
var depts = result.extend.depts;
$.each(depts,function(index,item){
//給option選項設置值應該是deptid
var opt = $("<option></option>").append(item.deptName).attr("value",item.deptId);
parent.append(opt);
});
}
}
);
//彈出對話框
$('#addEmpModal').modal({
backdrop:'static'
})
});
//點擊保存聯系人
$("#saveEmp").click(function(){
//判斷當前的聯系人是否可用
if( $(this).attr("isUserExist")=="yes"){
return false;
}
//首先判斷輸入的參數是否滿足規則
if(!validate_add_form()){
return false;
}
$.ajax({
url:"${APP_PATH}/save",
data:$("#addEmpModal form").serialize(),
type:"post",
success:function(result){
//首先需要判斷后端返回的結果中，后端對用戶的校驗結果
//alert(result.extend.err_map.email);
//alert(result.extend.err_map.empName);
//這里需要注意的是如果郵箱格式錯誤，姓名正確，result.extend.err_map.email中就像攜帶錯誤的信息，result.extend.err_map.empName的信息是undefined
if(result.code == 100){
//保存聯系人成功需要做下面的幾件事情
//第一件事情就是讓新建聯系人的對話框摸太框消失
$("#addEmpModal").modal('hide');
//第二個跳轉到最后一頁
//這里如何跳轉到最后一頁了，mybatis分頁插件這里提供了一個功能，例如現在員工總數是100人，每頁顯示5人，最大的分頁數目就是5，你如果輸入6
//也是按照最大的5來進行查詢。員工的總數肯定是大於最大的分頁數目的，現在要查詢最后一頁的數據，我以員工的總數進行查詢
//使用ajax重新再查詢下最后一頁員工的數目
//
to_page(total);
}else{
alert(result.extend.err_map.email);
//說明郵箱格式錯誤
if(undefined != result.extend.err_map.email){
alert(result.extend.err_map.email);
$("#emailModal").parent().removeClass("has-success has-error");
$("#email_span").text("");
$("#emailModal").parent().addClass("has-error");
//給span節點添加.help-block屬性
$("#email_span").addClass("help-block").text(result.extend.err_map.email);
}
//說明姓名格式有錯誤
if(undefined != result.extend.err_map.empName){
//添加元素狀態之前。先清空清除當前元素的校驗狀態
$("#empNameModal").parent().removeClass("has-success has-error");
$("#name_span").text("");
//給當前節點的父元素添加has-error屬性
$("#empNameModal").parent().addClass("has-error");
//給span節點添加.help-block屬性
$("#name_span").addClass("help-block").text(result.extend.err_map.empName);
}
}
}
});
});
//juqery前台校驗數據
//校驗表單數據
function validate_add_form(){
//1、拿到要校驗的數據，使用正則表達式
var empName = $("#empNameModal").val();
var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
if(!regName.test(empName)){
//添加元素狀態之前。先清空清除當前元素的校驗狀態
$("#empNameModal").parent().removeClass("has-success has-error");
$("#name_span").text("");
//給當前節點的父元素添加has-error屬性
$("#empNameModal").parent().addClass("has-error");
//給span節點添加.help-block屬性
$("#name_span").addClass("help-block").text("姓名格式不正確");
return false;
}else{
$("#empNameModal").parent().removeClass("has-success has-error");
$("#name_span").text("");
//給當前節點的父元素添加has-error屬性
$("#empNameModal").parent().addClass("has-success");
//給span節點添加.help-block屬性
$("#name_span").addClass("help-block").text("");
};
//2、校驗郵箱信息
var email = $("#emailModal").val();
var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
if(!regEmail.test(email)){
$("#emailModal").parent().removeClass("has-success has-error");
$("#email_span").text("");
$("#emailModal").parent().addClass("has-error");
//給span節點添加.help-block屬性
$("#email_span").addClass("help-block").text("郵箱格式不正確");
return false;
}else{
$("#emailModal").parent().removeClass("has-success has-error");
$("#email_span").text("");
$("#emailModal").parent().addClass("has-success");
//給span節點添加.help-block屬性
$("#email_span").addClass("help-block").text("");
}
return true;
}
//給輸入聯系人的input添加change事件，判斷當前聯系人是否可用
$("#empNameModal").change(function(){
//this表示當前操作的對象，是docment類型
//獲得當前輸入的name的值
var name=$(this).val();
$.ajax({
url:"${APP_PATH}/isUserExist",
type:"post",
data:"empName="+name,
success:function(result){
if(result.code == 200){
//說明該聯系人已經在后台存在不可以
//添加元素狀態之前。先清空清除當前元素的校驗狀態
$("#empNameModal").parent().removeClass("has-success has-error");
$("#name_span").text("");
//給當前節點的父元素添加has-error屬性
$("#empNameModal").parent().addClass("has-error");
//給span節點添加.help-block屬性
$("#name_span").addClass("help-block").text("該聯系人已經存在");
//如果當前聯系人已經存在，點擊保存聯系人案例的時候，就會失敗，我們給保存聯系人的按鈕添加一個自定義屬性用來標識當前添加的聯系人是否存在
$("#saveEmp").attr("isUserExist","yes");
}else{
//說明該聯系人可用
$("#empNameModal").parent().removeClass("has-success has-error");
$("#name_span").text("");
//給當前節點的父元素添加has-error屬性
$("#empNameModal").parent().addClass("has-success");
//給span節點添加.help-block屬性
$("#name_span").addClass("help-block").text("該聯系人可用");
$("#saveEmp").attr("isUserExist","no");
}
}
});
});
//給編輯按鈕添加點擊事件
$(document).on("click",".edit_btn",function(){
//彈出模態對話框
//首先清空頁面的所有數據
//將jquery對象轉化成docment對象，調用docment對象的reset方法
$("#updateEmpModal form")[0].reset();
$("#name_span_update").text("");
$("#email_span_update").text("");
$("#empNameModalUpdate").parent().removeClass("has-success has-error");
$("#emailModalUpdate").parent().removeClass("has-success has-error");
$("#dIdModalUpdate").empty();
//發送ajax請求獲得對應的部門信息
var parent = $("#dIdModalUpdate");
//使用ajax請求部門的數據
$.ajax(
{
url:"${APP_PATH}/depts",
type:"GET",
success:function(result){
//對result數據進行解析添加到
var depts = result.extend.depts;
$.each(depts,function(index,item){
//給option選項設置值應該是deptid
var opt = $("<option></option>").append(item.deptName).attr("value",item.deptId);
parent.append(opt);
});
}
}
);
//使用ajax請求獲得對應的員工信息
var emp_id = $(this).attr("edit_id");
//給編輯聯系人的對話框中國的更新按鈕添加自定義屬性，這樣在編輯聯系人頁面中就可以獲得被編輯聯系人的id
$("#saveEmpUpdate").attr("edit_id",emp_id);
$.ajax(
{
url:"${APP_PATH}/emp/"+emp_id,
type:"GET",
success:function(result){
//在對話框中顯示顯示姓名 p標簽是一個文本使用text
$("#empNameModalUpdate").text(result.extend.emp.empName);
//給郵箱復制，input對話框使用val
$("#emailModalUpdate").val(result.extend.emp.email);
//接下來要讓該聯系人對應的性別被選中，如何實現了
//首先找到id為updateEmpModal對話框下的name等於gender的input元素。這個元素就是單選框。val中傳入的值就是男就是對應的
//男的單選框被選中
$("#updateEmpModal input[name=gender]").val([result.extend.emp.gender]);
$("#updateEmpModal select").val([result.extend.emp.dId]);
}
}
);
//彈出對話框
$('#updateEmpModal').modal({
backdrop:'static'
})
});
//給編輯聯系人的保存按鈕增加點擊事件
$("#saveEmpUpdate").click(function(){
//使用ajax提交數據到后台更新數據這里需要
//強調的是我們采用的是put方式的提交
// data:$("#addEmpModal form").serialize()傳遞的請求參數中必須攜帶一個_method
var emp_id = $(this).attr("edit_id");
$.ajax({
url:"${APP_PATH}/update/"+emp_id,
type:"PUT",
data:$("#updateEmpModal form").serialize(),
success:function(result){
//修改聯系人成功之后，關閉修改聯系人的摸態對話框
if(result.code == 100){
$("#updateEmpModal").modal('hide');
//跳轉到當前的修改頁面
to_page(currentPage);
}
}
});
});
</script>
</div>
</body>
</html>