SSM项目(一)Day05修改员工(ajax技术解析出的按钮失效和rest风格PUT失效问题)

修改员工

  1. 点击编辑
  2. 发送ajax请求查询当条员工信息,弹出修改模态框
  3. 点击更新,发送ajax请求修改。

为编辑按钮绑定单击事件失效的问题:

页面加载完成之后执行js代码,显示的所有数据都是发送的ajax请求拿到的json数据,一般绑定方法是失效的
是在按钮创建之前绑定了点击事件,故失效
使用.live()、on()绑定单击事件

// 为编辑按钮绑定单击事件失效的问题:页面加载完成之后执行js代码,显示的所有数据都是发送的ajax请求拿到的json数据,一般绑定方法是失效的
    // 是在按钮创建之前绑定了点击事件,故失效
    // 使用.live()、on()绑定单击事件
    $(document).on("click",".edit_btn",function () { // 新版绑定点击事件方法
        // 查出下拉菜单部门信息、员工信息
        getDept("#dept_update_select");
        getEmp($(this).attr("edit_id"));
        // 将员工id传给模态框的更新按钮
        $("#emp_update_btn").attr("edit_id",$(this).attr("edit_id"));
        // 弹出模态框
        $("#empUpdateModal").modal({
            backdrop: 'static'
        });
    });

血案:更新的点击事件

  1. 按钮点击事件
  2. 数据校验正则表达式
  3. 向服务器发送ajax请求,因使用rest风格的url,data须指出_method=PUT请求
  4. 出现未知异常,数据并为修改成功,但不报错,解决中:在控制层打印出

更新数据Employee{empId=null, empName=‘null’, gender=‘null’, email=‘jerry123123@qq.com’, dId=1, department=null}

  1. 5.1 将更新方法上的{id}更改为{empId},即可修改成功
    5.2 如果不使用_method=PUT,发送post请求的写法,请求体中有数据但是Employe封装不上,原因:Tomcat将请求体中的数据封装为一个map。 获取参数时会从这个map中取值,那你只获取了id,肯定其他参数都为null。这是ajax发送put请求引发的血案。(request.getParameter(empName)=null),只有post请求才封装请求体
    Request类源码中:
    protected String parseBodyMethods = “POST”
    if(!getConnector().isParseBodyMethod(getMethod)){
    success = true;
    return;}
$("#emp_update_btn").click(function () {
        var emailText = $("#email_update_input").val();
        var emailPatt = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        if (!emailPatt.test(emailText)){
            $("#update_email_patt_msg").text("邮箱格式有误");
            return false;
        }
        $.ajax({
           url:"/emp/"+$(this).attr("edit_id"),
           // type:"POST",
           type:"PUT",
            // data:$("#empUpdateModal form").serialize()+"&_method=PUT",
            data:$("#empUpdateModal form").serialize(),
            // 在web.xml中配置过滤器HttpPutFormContentFilter
            success:function (data) {
                alert(data.msg)
            }
        });
    });

PUT请求失效解决

  1. 发送type="PUT"请求,不使用_method="PUT"的情况下:
  2. 在web.xml中配置HttpPutFormContentFilter配置(springmvc提供过滤器)

原理:

包装了一个自定义map,重写了getParameter方法,从自己封装的map中取数据
作用:将请求体中的数据解析包装成一个map,request被重新包装,getParameter()方法被重写,从自己封装的map中取数据

<!--  rest风格PUT请求的数据参数封装问题-->
  <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>
上一篇:大数据之路week04--day05(java 正则表达式)


下一篇:python学习day05