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赋值给 更新按钮
$(document).on("click", ".edit_btn", function () {
//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);
}
});
});
效果如图所示：
时间： 2024-10-31 06:36:25