Spring+SpringMVC+Mybatis实现增删改查--（五）SSM修改员工页面搭建
Spring+SpringMVC+Mybatis实现增删改查--（五）SSM修改员工页面搭建
修改员工：
1.在index.jsp页面点击“编辑”弹出编辑对话框
2.去数据库查询部门列表，显示在编辑对话框中
3.去数据库查询员工信息，并显示在编辑对话框中
4完成更新，这里发送POST请求，REST风格用于区别增删改查。
新增员工的具体流程步骤
1.点击编辑弹出用户修改的模态框（显示用户信息）
（1）如果直接在按钮上绑定点击事件，是不起作用的
$(“.edit_btn”).click(function(){
alert(“edit”);
});（2）在jquery帮助文档中搜索按钮绑定事件on
（3）按钮的具体绑定事件
//给编辑按钮绑定点击 事件
$(document).on("click",".edit_btn",function(){
//alert("edit");
//1.查出部门信息，并显示部门列表
//发送ajax请求，查出部门信息，显示在下拉列表中
getDepts("#empUpdateModal select");
//2.查出员工信息，并显示员工信息
getEmp($(this).attr("edit-id"));
//3.把员工的id传递给模态框的更新按钮
$("#emp_update_btn").attr("edit-id",$(this).attr("edit-id"));
$("#emp_update_btn")
//弹出模态框
$("#empUpdateModal").modal({
backrop:"static"
});
});（4）编辑模态框的源码
2.查出部门信息同上一文章，
3.查出员工信息
（1）发出ajax请求
//查询员工信息
function getEmp(id){
$.ajax({
url:"${APP_PATH}/emp/"+id,
type:"GET",
success:function(result){
//console.log(result);
var empData=result.data.emp;
$("#empName_update_static").text(empData.empName);
$("#email_update_input").val(empData.email);
$("#empUpdateModal input[name=gender]").val([empData.gender]);
$("#empUpdateModal select").val([empData.dId]);
}
});
}（2）EmployeeController调用employeeService的更新方法
/**
* 员工更新方法
*
* @param employee
* @return
*/
@RequestMapping(value="/emp/{empId}",method=RequestMethod.PUT)
@ResponseBody
public Msg saveEmp(Employee employee) {
employeeService.updateEmp(employee);
return Msg.success();
}4.更新操作
（1）校验邮箱信息
（2）发送ajax请求保存员工数据（关闭对话框、回到本页面）
//点击更新，更新员工信息
$("#emp_update_btn").click(function () {
//验证邮箱是否合法
//1.校验邮箱信息
var email=$("#email_update_input").val();
var regEmail=/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
if (!regEmail.test(email)) {
//alert("邮箱格式不正确");
//清空这个元素之前的样式
show_validate_msg("#email_add_input","error","邮箱格式不正确");
return false;
}else{
show_validate_msg("#email_add_input","success","");
}
//2.发送ajax请求保存员工数据
$.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);
}
});
});这里我们要能支持直接发送PUT之类的请求爱要封装请求体中的数据，配置上HttpPutForContentFilter。它的作用是将请求体中的数据解析包装成一个map。request被重新包装，request.getParameter()被重写，就会从自己封装的map中取数据。
在web.xml中配置HttpPutForContentFilter过滤器
HttpPutFormContentFilter
org.springframework.web.filter.HttpPutFormContentFilter
HttpPutFormContentFilter
/*
最后给出本节的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"%>
员工列表
<%
pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
SSM-CRUD
#
empName
gender
email
deptName
操作