SSM整合04_改删

修改

点击编辑->弹出修改模态框->点击更新，完成数据修改。

点击修改弹出模态框

• 写一个模态框
  …
• 给更新和删除按钮添加class 标识

var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                        .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
                    var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
                        .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");

分别为edit_btn和delete_btn

• 绑定单击事件弹出模态框
  直接这样写绑定不上

$(".edit_btn").click(function () {
                alert("绑定成功")
            })

因为创建按钮之前就绑定了click事件，所以绑定不上，
解决方法:1.在创建按钮的时候绑定2.绑定点击.live(),jquery中的一个方法，可以为后来的元素绑定方法，即使是后面添加也可以绑定上。jquery新版没有live方法,而是使用了on方法进行替代

		$(document).on("click",".edit_btn",function () {
                //查出员工信息，在模态框中显示
                //查出部门信息，在下拉框中显示
                getDepts("#empUpdateModel select");//用于填充下拉框
                $("#empUpdateModel").modal({
                    backdrop: "static"
                })
            })

为了查询员工的属性，在创建员工editBtn的时候给editBtn创建一个属性

//为编辑按钮添加一个自定义属性，标识员工id
editBtn.attr("edit-id",item.empId);

修改绑定事件的方法

$(document).on("click",".edit_btn",function () {
               //查出部门信息，在下拉框中显示
               getDepts("#empUpdateModel select");
               //查出员工信息，在模态框中显示
               getEmp($(this).attr("edit-id"));
               $("#empUpdateModel").modal({
                   backdrop: "static"
               })
           })
           function getEmp(id){
               $.ajax({
                   url:"${APP_PATH}/emp/"+id,
                   type:"GET",
                   success:function (result) {
                       var empData = result.extend.emp;
                       $("#empName_update_static").text(empData.empName);
                       $("#email_update_input").val(empData.email);
                       $("#empUpdateModel input[name=gender]").val([empData.gender]);
                       $("#empUpdateModel select").val([empData.dId]);
                   }
               });
           }

• 对应ajax对应的服务器端方法

/**查询员工数据*/
   @RequestMapping(value = "/emp/{id}",method = RequestMethod.GET)
   @ResponseBody
   public Msg getEmp(@PathVariable("id") Integer id){
       Emp emp = empService.getEmp(id);
       return Msg.succezz().add("emp",emp);
   }

public Emp getEmp(Integer id) {
       Emp emp = empMapper.selectByPrimaryKey(id);
       return emp;
   }

更新功能实现

• 前端请求(不直接使用POST请求)
  自己定义一个currentPage用于存放当前页码，在构造分页条的时候给他赋值
  currentPage = result.extend.pageInfo.pageNum;
  这样写HiddenHttpMethodFilter会帮我们将请求从PUT转成POST请求

//点击更新，更新员工信息
            $("#emp_update_btn").click(function () {
                //验证邮箱是否合法
                var email = $("#email_update_input").val();
                var regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
                if(!regEmail.test(email)){
                    alert("邮箱格式非法");
                    return false;
                }
                //发送ajax请求保存更新后的员工数据
                $.ajax({
                    url:"${APP_PATH}/emp/"+$(this).attr("edit-id"),
                    type:"POST",
                    data:$("#empUpdateModel form").serialize()+"&_method=PUT",
                    success:function (result) {
                        //关闭对话框
                        $("#empUpdateModel").modal("hiden");
                        //回到本页面
                        to_page(currentPage);
                    }
                })
            })

• 后端代码

/** 更新员工*/
    @RequestMapping(value = "/emp/{empId}",method = RequestMethod.PUT)
    @ResponseBody
    public Msg updateEmp(Emp emp){
        empService.updateEmp(emp);
        return Msg.succezz();
    }

	public void updateEmp(Emp emp) {
        empMapper.updateByPrimaryKeySelective(emp);
    }

• 直接ajax请求使用PUT的话会出现血案
  命名请求中有数据，但是Emp对象却封装不上。拿不到的根本原因是Tomcat一看是PUT请求，不会封装请求体中的数据为map,只有POST形式的请求才会封装为map。
  tomcat源码(org.apache.cataliona.connector.Request 3112行左右的parseParameters()方法)：

if(!getConnector().isParseBodyMethod(getMethod())){
	success = true;
	return;
}

isParseBodyMethod事务源码

protected boolean isParseBodyMethod(String method){
	return parseBodyMethodSet.contains(method);
}

parseBodyMethodSet实际上默认就是POST。

• 结局方案
  MVC中有一个过滤器HttpPutFormContentFilter
  spring5.1版本之后HttpPutFormContentFilter已过时，不推荐使用
  新版本的是FormContentFilter，支持PUT, PATCH, 和 DELETE 请求

<filter>
        <filter-name>FormContentFilter</filter-name>
        <filter-class>org.springframework.web.filter.FormContentFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>FormContentFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

他的作用，将请求体中的数据解析包装成为一个map，request.getParameter被重写，就会从自己封装的map中取数据