SSM整合-Ajax发送PUT请求修改员工信息引发的问题

在点击弹出模态框的代码前面加入以下代码
好让更新按钮获取到员工id

//把员工id传递给模态框中的更新按钮
        $("#emp_update_btn").attr("update-id",$(this).attr("edit-id"));

为更新按钮绑定单击事件并且发送ajax请求更新员工:

 //为更新按钮绑定单击事件:
    $("#emp_update_btn").click(function () {
        /*首先进行邮箱验证*/
        var empemail = $("#email_update_input").val();
        var regemail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
        if (!regemail.test(empemail)) {
            // alert("邮箱格式不正确");
            show_validata_msg("#email_update_input", "error", "邮箱格式不正确");
            return false;
        } else {
            show_validata_msg("#email_update_input", "success", "邮箱可用");

        }
        $.ajax({
            url:"${APP_PATH}/emp/"+$(this).attr("update-id"),
            type:"POST",
            data:$("#empUpdateModal form").serialize(),
            success:function(result) {
                alert(result.msg);
            }

        });

    });

Controller层

 //更新员工
    @ResponseBody
    @RequestMapping(value = "/emp/{id}",method = RequestMethod.PUT)
    public Msg saveEmp(Employee employee){
        employeeService.saveEmp(employee);
        return Msg.success();
    }

Service层

//更新员工
    public void saveEmp(Employee employee) {
        employeeMapper.updateByPrimaryKeySelective(employee);
    }

一切看起来都没错,可是出错了…
控制台报了以下错:

这里写图片描述

原因是表单请求时没有带上_method=PUT参数
在ajax中应该这样写
这里写图片描述
然后就看到成功了:

但是其实并没有修改成功,因为我刷新可以看到邮箱并没有改变……
所以呢在控制器中打印一下要修改的数据:

发现id是空的,Employee对象没有封装好,所以没有修改
然后发现:

改为

//更新员工
    @ResponseBody
    @RequestMapping(value = "/emp/{empId}",method = RequestMethod.PUT)
    public Msg saveEmp(Employee employee){
        System.out.println("要更新的员工数据:"+employee);
        employeeService.saveEmp(employee);
        return Msg.success();
    }

然后就可以看到真的修改成功了
这里写图片描述

那如果想ajax直接发送PUT请求,并且不用带上_method=PUT参数呢?
像下面这样,这样就简洁多了
这里写图片描述
但是这样子报错了…….
说是sql语句有问题
而且打印出来的数据除了id有值其他值都为null,很明显跟上一条成功的数据不一样:

可以看到请求体中是有数据的,但是Employee对象封装不上
这里写图片描述
所以导致sql拼装失败了
原因是在Tomcat中,会将请求体中的数据，封装成为一个map
SpringMVC封装POJO对象的时候会把POJO中每个属性的值调用request.getParamter("xxx")的方法从map中取出
而Tomcat看到是PUT请求不会封装请求体中的数据为map，只有POST形式的请求才会封装请求体为map,所以会封装失败

怎么解决呢?
针对这个问题SpringMVC提供了解决方案,就是在web.xml中配置HttpPutFormContentFilter这个过滤器
它的作用就是将请求体中的数据解析包装成一个map,这样request被重新包装，request.getParameter()被重写，就会从自己封装的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>

然后就可以看到成功了,并且页面上也显示正确
这里写图片描述
接下来把Update做完,也就是修改完成后关闭模态框回到本页面

$.ajax({
            url:"${APP_PATH}/emp/"+$(this).attr("update-id"),
            type:"PUT",
            data:$("#empUpdateModal form").serialize(),
            success:function(result) {
                // alert(result.msg);
                //关闭模态框
                $("#empUpdateModal").modal("hide");
                //回到本页面,currentPage是解析并显示分页信息时存好的
                to_page(currentPage);
            }

        });

SSM整合-Ajax发送PUT请求修改员工信息引发的问题

猜你喜欢