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);
}
});
});
效果如图所示：
