http 的post 和 get 方法確實很難區分，大多數的解釋都是，如果是新建一條記錄的話就用post，如果是更新一條記錄的話就用put.
具體原因不闡述，下面主要介紹修改員工信息的方法。
后台端：
1 web.xml配置
使其能夠接受PUT請求，且能夠從PUT請求中獲取數據。
1)直接發送PUT請求，數據無法封裝，原因：
* Tomcat：
* 1、將請求體中的數據，封裝一個map。
* 2、request.getParameter("empName")就會從這個map中取值。
* 3、SpringMVC封裝POJO對象的時候，就可直接獲取對象：request.getParamter("email");
2)AJAX發送PUT請求引發的血案：
* PUT請求，請求體中的數據，request.getParameter("empName")拿不到
* Tomcat一看是PUT不會封裝請求體中的數據為map，只有POST形式的請求才封裝請求體為map
解決方案；
* 我們要能支持直接發送PUT之類的請求還要封裝請求體中的數據
* 1、配置上HttpPutFormContentFilter：將請求體中的數據解析包裝成一個map。
* 2、request被重新包裝，request.getParameter()被重寫，就會從自己封裝的map中取數據
在web.xml中進行配置：
<!-- 4、使用Rest風格的URI，將頁面普通的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> <!--HttpPutFormContentFilter：將請求體中的數據解析包裝成一個map --> <filter> <filter-name>HttpPutFormContentFilter</filter-name> <filter-class>org.springframework.web.filter.HttpPutFormContentFilter</filter-class> </filter> <filter-mapping> <filter-name>HttpPutFormContentFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
2 后台更新修改后的員工信息：
@RequestMapping(value ="emp/updateEmp/{empId}", method = {RequestMethod.PUT})
@ResponseBody
public Msg updateEmp(Employee employee){
int result = employeeService.updateEmp(employee);
if (result < 0){
return Msg.fail().add("update-error", "更新異常");
}
return Msg.success();
}
點擊編輯的時候，有個員工信息的回顯，所以需要在后台根據empId查詢對應的員工信息再顯示到頁面中：
/** * 根據員工id查詢員工 * @param empId 員工id * @return */ @RequestMapping(value ="emp/getEmp/{empId}", method = {RequestMethod.GET}) @ResponseBody public Msg getEmpById(@PathVariable("empId") Integer empId){ if (empId >= 0){ Employee employee = employeeService.getEmpById(empId); return Msg.success().add("employee", employee); }else { return Msg.fail(); } }
前端：
1 修改的模態框：
<!--修改員工Modal框--> <div class="modal fade" id="Emp_Update_Modal" tabindex="-1" role="dialog" aria-labelledby="emp_update_modal_label"> <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="emp_update_modal_label">修改員工</h4> </div> <div class="modal-body"> <form class="form-horizontal" id="emp_update_form"> <div class="form-group"> <label for="empName" class="col-sm-2 control-label">empName:</label> <div class="col-sm-10"> <p class="form-control-static" id="empName_update_static"></p> </div> </div> <div class="form-group"> <label for="email" class="col-sm-2 control-label">email:</label> <div class="col-sm-10"> <input type="email" class="form-control" name="eamil" id="email_update" placeholder="email"> <span id="edit_helpBlock2" class="help-block"></span> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">gender:</label> <div class="col-sm-offset-2 col-sm-10"> <label class="radio-inline"> <input type="radio" name="gender" id="gender1__update_input" checked="checked" value="M"> 男 </label> <label class="radio-inline"> <input type="radio" name="gender" id="gender2__update_input" value="F"> 女 </label> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">deptName:</label> <div class="col-sm-4"> <select class="form-control" name="dId" id="deptName_select_update"> </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="emp_update_btn">更新</button> </div> </div> </div> </div>
2 為編輯按鈕加上id：
var editBtn = $("<button></button>").addClass("btn btn-info btn-sm edit_btn")
.append( $("<span></span>").addClass("glyphicon glyphicon-pencil")
.append("編輯"));
//修改的時候 ，獲取點擊的員工的id
editBtn.attr("edit-id", item.empId);
3 前端獲取員工信息：
/**
* 修改：獲取員工信息
*/
function getEmp(empId){
$.ajax({
url: "${APP_PATH}/emp/getEmp/"+empId,
type : "GET",
success: function (result) {
var empData = result.extendInfo.employee;
$("#empName_update_static").text(empData.empName);
$("#email_update").val(empData.eamil);
$("#Emp_Update_Modal input[name=gender]").val([empData.gender]);
$("#deptName_select_update").val(empData.dId);
}
});
}
4 修改第一步：彈出修改模態框
1) 點擊編輯，彈出模態框
2) 查詢部門信息，顯示在部門下拉框中
3) 查詢員工信息，進行回顯，員工姓名只顯示不允許修改
4) 將員工id賦值給 更新按鈕
/**
* 修改第一步：彈出修改模態框
* 1 點擊編輯，彈出模態框
* 2 查詢部門信息，顯示在部門下拉框中
* 3 查詢員工信息，進行回顯，員工姓名只顯示不允許修改
* 4 將員工id賦值給 更新按鈕
*/
$(document).on("click", ".edit_btn", function () {
//0 清除表單樣式
reset_form("#Emp_Update_Modal form");
//1 查出部門信息，進行回顯
getDeptName("#deptName_select_update");
//2 查出員工信息，進行回顯
getEmp($(this).attr("edit-id"));
//3 把員工的 id 傳給修改Modal框的更新按鈕,獲取id后點擊更新按鈕發送Ajax請求
$("#emp_update_btn").attr("edit-id", $(this).attr("edit-id"));
$("#Emp_Update_Modal").modal({
backdrop:"static",
keyboard : true
});
});
5 修改第二步：保存修改信息
1) 點擊更新按鈕，進行郵箱格式驗證
2) 將更改的表格內容序列化，發送Ajax請求，存入數據庫；
3) 關閉模態框
4) 回到本頁面
$("#emp_update_btn").click(function () {
var email = $("#email_update").val();
var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
if(!regEmail.test(email)){
show_validate_msg("#email_update", "error", "郵箱格式不正確！");
return false;
}else{
show_validate_msg("#email_update", "success", "");
}
$.ajax({
url: "${APP_PATH}/emp/updateEmp/"+ $(this).attr("edit-id"),
type : "PUT",
data : $("#emp_update_form").serialize(),
success : function (result) {
//1 關閉模態框
$("#Emp_Update_Modal").modal("hide");
//2 回到本頁面
to_page(currentPage);
}
});
});
效果如圖所示：
