SSM:十、CRUD的修改员工功能
SSM:十、CRUD的修改t员工功能
思路：1、先得到员工的id，在服务器端发送/get/{id}请求，请求的方式为GET，在前端发送ajax请求得到服务器端传来的数据，依据empId将员工的数据取出，在模态框中加以显示。
2、在对在模态框中的输入的数据进行保存，在服务器段发送/save/{empId}请求，请求方式为PUT，然后再前端发送ajax请求得到服务器的json数据，进行保存操作。
注意事项：在tomcat服务器中，在用ajax发送请求时，不能直接使用type为PUT的请求类型，因为tomcat无法识别进行封装成请求。
解决方式：①在ajax请求中，使用将POST请求转换成PUT请求，–》type:“POST”
data:xxxx + “&_method=PUT”，使用这种方式可以发送为PUT请求。
②使用springMVC封装的拦截器，可以直接发送PUT请求，在web.xml文件中配置以下：
<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>
在JSP文件中增加员工修改的模态框
<!--更新Modal开始-->
<div class="modal fade" id="myUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">员工-增加</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="add_emp_Name" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-6">
<p class="form-control-static" id="update_emp_static"></p>
</div>
</div>
<div class="form-group">
<label for="add_emp_Email" class="col-sm-2 control-label">email</label>
<div class="col-sm-6">
<input type="email" name="email" class="form-control" id="update_emp_Email" placeholder="请输入邮箱">
<span class="help-block"></span>
</div>
</div>
<!--内联单选按钮-->
<div class="form-group">
<label for="add_emp_Email" class="col-sm-2 control-label">性别</label>
<div class="col-sm-8">
<label class="radio-inline col-sm-2">
<input type="radio" name="gender" id="update_emp_gender1" value="M" checked="checked"> 男
</label>
<label class="radio-inline col-sm-2">
<input type="radio" name="gender" id="update_emp_gender2" value="F"> 女
</label>
</div>
</div>
<div class="form-group">
<label for="add_emp_Email" class="col-sm-2 control-label">部门</label>
<div class="col-sm-4">
<select class="form-control col-sm-4" name="dId">
</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="update_button">更新</button>
</div>
</div>
</div>
</div>
<!--更新Modal结束-->
在服务器后端得到依据员工id得到员工的信息以及保存员工的具体操作。
EmpServicer层 （依据id得到员工和更新员工）
//根据员工id查找对应的员工
public Employee getEmp(Integer id) {
Employee employee = employeeMapper.selectByPrimaryKey(id);
return employee;
}
/**
*
* 更新员工
* @param employee
*/
public void updateEmp(Employee employee) {
employeeMapper.updateByPrimaryKeySelective(employee);
}
empController层
/**
* 得到员工信息
* -->/get/{id=}
*/
@ResponseBody
@RequestMapping(value = "/get/{id}",method = RequestMethod.GET)
//根据路径来将id值传入
public Msg getEmp (@PathVariable("id") Integer id) {
Employee employee = employeeService.getEmp(id);
return Msg.success().add("emp",employee);
}
/**
* 在tomcat中不会封装PUT请求，用ajax发送请求时不可以直接用type：PUT对数据进行传递
* 解决方案：1、在data上后面加上+"&_method=PUT"，将POST请求转为PUT请求
* 2、 用springMVC里封装的方法进行拦截,在web.xml上配置拦截属性
* @param employee
* @return
*/
//保存更新的员工信息
@ResponseBody
@RequestMapping(value = "/save/{empId}",method = RequestMethod.PUT)
public Msg saveEmp (Employee employee) {
employeeService.updateEmp(employee);
return Msg.success();
}
得到员工的发送的ajax方法
先给编辑的按钮添加点击监听，在打开模态框之间执行得到部门的信息以及与员工的信息。
//更新
//利用样式进行过滤，添加on进行click监听
$(document).on('click','.edit_btn',function () {
//1、得到部门信息
getDepts('#myUpdateModal select')
//2、得到员工的信息，找到对应的属性，将id取出。
getEmp($(this).attr("edit-id"));
//把员工id传入模态框的更新按钮上
$('#update_button').attr('update-id', $(this).attr("edit-id"));
//console.log($(this).attr("edit-id"))
//弹出静态框
$('#myUpdateModal').modal({
backdrop : 'static'
})
})
//更新员工
function getEmp(id) {
$.ajax({
url:'${APP_PATH}/get/'+id,
type:"GET",
success:function (result) {
//测试返回的数据
// console.log(result);
//得到emp的值
var empData = result.extend.emp;
$('#update_emp_static').text(empData.empName);
$('#update_emp_Email').val(empData.email);
$('#myUpdateModal input[name=gender]').val(empData.gender);
$('#myUpdateModal select').val(empData.dId);
}
})
}
发送ajax将数据进行保存
在保存之前，依旧对email的信息进行正则表达式检验。
//更新员工
$('#update_button').click(function () {
//1、判断员工的正则表示式
var empEmail = $('#update_emp_Email').val();
var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
if(!regEmail.test(empEmail)) {
show_invalid('#update_emp_Email','error','邮箱格式不正确！');
// console.log("格式错误！")
return false;
}else {
show_invalid('#update_emp_Email', 'success', '')
}
var empId = $(this).attr('update-id');
//console.log(empId)
//2、发送ajax请求保存员工信息
$.ajax({
url:'${APP_PATH}/save/' + empId ,
type:"PUT",
data:$('#myUpdateModal form').serialize(),
success:function (result) {
alert(result.message);
//1、关闭模态框
$('#myUpdateModal').modal('hide');
//2、回到当前页数-->得到当前的pageNum
to_Page(current_page);
}
})
})
具体的运行结果：
感情之事不能强求，好好照顾自己。