注意在目前了解到的所有的js操作中：
//只有下面的方法，查找有 点+类名 ，比如【.edit-btn】 这个算标签内的自定义属性。
//其他地方，查找类名，都不需要添加 . 号 【原因就是 . 代表查找同类名的所有元素 】
$(document).on("click",".edit-btn",function(){ });
一、思路概述：
0、新建了一个 全局变量 当前页码信息，当保存提交时，显示的 还是当前页码。
1、get deps方法中 ajax 的异步和同步问题 获取部门请求，会影响更新操作前 获取员工信息，并赋值给 select 的dep 部门。两个都是 异步操作，容易出现提前赋值 select ，后在出现 select 部门选项
2、//2、发送ajax请求保存更新的员工数据 添加 _method
$.ajax({
url:"${APP_PATH}/emp/"+$(this).attr("edit-id"),
type:"post",
data:$("#empUpdateModal form").serialize()+"&_method=put",
success:function(result){
这样做会来到，web.xml 中的过滤器
<!-- 使用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>
3、 @RequestMapping(value="/emp/{id}”,method=RequestMethod.PUT)
改成
@RequestMapping(value="/emp/{empId}",method=RequestMethod.PUT)
4、如果改成 ajax 的 put 方法，则不需要在data中添加 "&_method=put" ，但是 tomcat 无法封装 请求体，导致 报错。
* 原因：
* Tomcat：
* 1、将请求体中的数据，封装一个map。
* 2、request.getParameter("empName")就会从这个map中取值。
* 3、SpringMVC封装POJO对象的时候。
* 会把POJO中每个属性的值，request.getParamter("email");
* AJAX发送PUT请求引发的血案：
* PUT请求，请求体中的数据，request.getParameter("empName")拿不到
* Tomcat一看是PUT不会封装请求体中的数据为map，只有POST形式的请求才封装请求体为map
* 查看下面的 tomcat 源码 解析 ，发现只有post
* org.apache.catalina.connector.Request(类名)—parseParameters() (方法名)( 行号 3111);
*
* protected String parseBodyMethods = "POST";
* if( !getConnector().isParseBodyMethod(getMethod()) ) {
success = true;
return;
}
*
*
* 解决方案；
* 我们要能支持直接发送PUT之类的请求还要封装请求体中的数据
* 1、配置上HttpPutFormContentFilter；
* 2、他的作用；将请求体中的数据解析包装成一个map。
* 3、request被重新包装，request.getParameter()被重写，就会从自己封装的map中取数据
* 员工更新方法
二、添加模态框：
1、直接复制并修改之前的员工添加模态框：
<!-- 员工修改的模态框 -->
<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">员工修改</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group row">
<label class="col-sm-3 col-form-label">empName</label>
<div class="col-sm-9">
<input type="text" readonly class="form-control-plaintext" id="empName_update_input_disable" name="empName" value="none">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">email</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="email_update_input" name="email" placeholder="[email protected]">
<div class="invalid-feedback"> 邮箱输入错误。</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">gender</label>
<div class="col-sm-9">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="gender1_update_input" checked value="M">
<label class="form-check-label" >男</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="gender2_update_input" value="F">
<label class="form-check-label" >女</label>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">departName</label>
<div class="col-sm-6">
<!-- 部门提交部门id即可 -->
<select class="custom-select my-1 mr-sm-2" name="dId" id="dept_update_select">
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="emp_update_done_btn">更新</button>
</div>
</div>
</div>
</div>
2、添加点击出现模态框事件
注意绑定的时间，因为在生成button后，才能完成绑定。所以绑定的方法不是普通方法。[ edit-btn 这个伪类]
/***
1、我们是按钮创建之前就绑定了click，所以绑定不上。
$(".edit-btn").click(function(){
alert("edit");
});
****/
//1）、可以在创建按钮的时候绑定。
//2）、绑定点击 live() 方法，这个方法就算是后来添加的元素，也能绑定方法
/***
$(".edit-btn").live(function(){
alert("edit");
});
***/
//但是新版jquery没有live方法，使用on方法进行替代
/*** 下面的写法 不对
$(".edit-btn").on("click",function(){
alert("edit");
});
***/
// edit-btn 这个是在一开始展示表格信息的时候，就已经添加了。
//注意 这里是 .edit-btn 算标签内的自定义属性，只是这里使用时 有个点号
$(document).on("click",".edit-btn",function(){
//0、清空表单样式和内容
reset_form("#empUpdateModal form");
//1、查出部门信息，并显示部门列表
getDepts("#empUpdateModal select");
//2、查询员工信息，并显示员工信息 // 坑爹 一开始写成了 attr(edit-id)
getEmp($(this).attr("edit-id"));
//3、把员工的id传递给模态框的更新按钮，为了发送ajax时传递id
$("#emp_update_done_btn").attr("edit-id",$(this).attr("edit-id"));
//alert("edit");
$("#empUpdateModal").modal({
backdrop:"static"
});
});
3、将添加雇员信息用到的 getDepts() 方法，进行了抽取
async:false, 这里用到了同步请求方法，如果是异步方法，可能会出现第四步设置设置部门信息时，可能部门信息还没有获取到，就已经开始设置哪个部门是员工现在默认的了。
//1、查出部门信息，并显示部门列表
function getDepts(ele){
$.ajax({
url:"${APP_PATH}/depts",
type:"GET",
async:false,
success:function(result){
console.log(result);
//显示部门信息，在下拉列表中
// $("#dept_add_select") 换一种找法
//$("#empAddModal select")
//清除之前留下的 option 标签
$(ele).empty();
$.each(result.extend.depts,function(){
var optionEle = $("<option></option>").attr("value",this.deptId).append(this.deptName);
optionEle.appendTo(ele);
});
}
});
}
4、显示员工信息方法
（1）前端请求代码：
function getEmp(id){
$.ajax({
url:"${APP_PATH}/emp/"+id,
type:"get",
success:function(result){
console.log(result);
var empData = result.extend.emp;
$("#empName_update_input_disable").val(empData.empName);
$("#email_update_input").val(empData.email);
$("#empUpdateModal input[name=gender]").val([empData.gender]);
$("#empUpdateModal select").val([empData.dId]);
}
})
}
（2）后端处理代码：
EmployeeController.java
/**
* 根据id查询员工
* @param id
* @return
*/
@RequestMapping(value="/emp/{id}",method=RequestMethod.GET)
@ResponseBody
public Msg getEmp(@PathVariable("id")Integer id){
Employee employee = employeeService.getEmp(id);
return Msg.success().add("emp", employee);
}
EmployeeService.java
/**
* 按照员工Id 查询员工
* @param id
* @return
*/
public Employee getEmp(Integer id) {
// TODO Auto-generated method stub
Employee employee = employeeMapper.selectByPrimaryKey(id);
return employee;
}
三、保存员工修改信息
1、添加保存按钮点击事件
之前对前端框架不熟悉，忘记添加这句话了$("#empUpdateModal").modal("hide");
导致点击提交事件后，一直没有关闭模态框，我以为会自动关闭模态框，原因找了很久，后来才发现。
//点击更新，更新员工信息
$("#emp_update_done_btn").click(function(){
console.log("提交更新方法---邮箱校验");
//验证邮箱是否合法
if(!validate_form_ele("#email_update_input",g_email_reg,g_email_valid,g_email_invalid_format))
return false;
//2、发送ajax请求保存更新的员工数据
$.ajax({
url:"${APP_PATH}/emp/"+$(this).attr("edit-id"),
type:"post",
data:$("#empUpdateModal form").serialize()+"&_method=put",
success:function(result){
//alert(result);
//console.log(result);
if(result.code=100){
//1、员工修改成功，需要关闭模态框。
$("#empUpdateModal").modal("hide");
//2、来到最后一页，显示刚才的数据；发送ajax请求，显示最后一页数据即可(用总记录数请求，保证是请求足够大，mybatis 分页插件 已经在mybatis-config.xml中配置了数据合法性校验，只会返回最后一页数据)
to_page(g_currentPage);
}else{
//后端校验 显示失败信息
if(undefined!=result.extend.errorFileds.email){
//显示邮箱错误信息
show_validate_msg("#email_update_input","error",result.extend.errorFileds.email);
}
}
}//success 方法结束
});
});
特别注意：
1、to_page(g_currentPage); g_currentPage 是一个全局变量，我在显示分页信息时，将其赋了值。
2、保存时，ajax 发送的是post请求，然后用参数 data:$("#empUpdateModal form").serialize()+"&_method=put", 利用 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>
2、后端处理
EmployeeController.java
@ResponseBody
@RequestMapping(value="/emp/{empId}",method=RequestMethod.PUT)
public Msg saveEmp(Employee employee){
System.out.println("将要更新的员工数据："+employee);
employeeService.updateEmp(employee);
return Msg.success();
}
特别注意：value="/emp/{empId}" ，不是 value="/emp/{id}" 因为empId要赋值给 employee 中的empId属性，前端的post 请求中，不包括empId。
前端put请求举例如下：
empName=adafaf&email=123123%4013.com&gender=F&dId=1&_method=put
EmployeeService.java
public void saveEmp(Employee employee) {
// 下面这个方法 是全部插入 ,包括 连自增的id 都是
// employeeMapper.insert(employee);
// 下面这个方法是 有选择的插入，自增Id 被忽略 不会插入。
employeeMapper.insertSelective(employee);
}
四、保存员工修改信息改良方法
1、前端直接用ajax的put请求：
$.ajax({
url:"${APP_PATH}/emp/"+$(this).attr("edit-id"),
type:"PUT",
data:$("#empUpdateModal form").serialize(),
success:function(result){
//alert(result.msg);
//1、关闭对话框
$("#empUpdateModal").modal("hide");
//2、回到本页面
to_page(currentPage);
}
});
2、后端解决方法
/**
* 如果直接发送ajax=PUT形式的请求
* 封装的数据
* Employee
* [empId=1014, empName=null, gender=null, email=null, dId=null]
*
* 问题：
* 请求体中有数据；
* 但是Employee对象封装不上；
* update tbl_emp where emp_id = 1014;
*
* 原因：
* Tomcat：
* 1、将请求体中的数据，封装一个map。
* 2、request.getParameter("empName")就会从这个map中取值。
* 3、SpringMVC封装POJO对象的时候。
* 会把POJO中每个属性的值，request.getParamter("email");
* AJAX发送PUT请求引发的血案：
* PUT请求，请求体中的数据，request.getParameter("empName")拿不到
* Tomcat一看是PUT不会封装请求体中的数据为map，只有POST形式的请求才封装请求体为map
* Tomcat 源码，查看 put 的处理逻辑
* org.apache.catalina.connector.Request【类名】--parseParameters()【方法名】 (行号:3111);
*
* protected String parseBodyMethods = "POST";
* if( !getConnector().isParseBodyMethod(getMethod()) ) {
success = true;
return;
}
*
*
* 解决方案；
* 我们要能支持直接发送PUT之类的请求还要封装请求体中的数据
* 1、配置上HttpPutFormContentFilter；
* 2、他的作用；将请求体中的数据解析包装成一个map。
* 3、request被重新包装，request.getParameter()被重写，就会从自己封装的map中取数据
* 员工更新方法
* @param employee
* @return
*/
@ResponseBody
@RequestMapping(value="/emp/{empId}",method=RequestMethod.PUT)
public Msg saveEmp(Employee employee,HttpServletRequest request){
System.out.println("请求体中的值："+request.getParameter("gender"));
System.out.println("将要更新的员工数据："+employee);
employeeService.updateEmp(employee);
return Msg.success() ;
}
注意一下：需要在 web.xml中添加
<!-- 5、直接支持put请求的拦截器，即在put请求时将请求体数据封装成map，并让springmvc能够通过request.getParameter(属性名) 来获取数据 --> <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>