SpringMVC_14_RESTFUL_CRUD(四)实现删除数据DELETE

ok,上一章实现了添加操作。这一章完成DELET删除数据的操作。

首先需要了解的是，因为是DELETE以及之后的PUT请求本身html是不支持的，所以需要利用POST请求，通过拦截器配置处理为相应的DELETE或者PUT请求。

一、我们首先需要做的在web.xml中配置：把POST请求转为DELETE、PUT请求

<filter>
    <filter-name>HiddenHttpMethodFilter</filter-name>
    <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
</filter>

<filter-mapping>
    <filter-name>HiddenHttpMethodFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

现在的web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

    <!--配置SpringMVC的 DispatcherServlet-->
    <servlet>
        <servlet-name>springDispatcherServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:springmvc.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <!--Map all requests to the DispatcherServlet for handling-->
    <servlet-mapping>
        <servlet-name>springDispatcherServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

    <!--配置：把POST请求转为DELETE、PUT请求-->
    <filter>
        <filter-name>HiddenHttpMethodFilter</filter-name>
        <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
    </filter>

    <filter-mapping>
        <filter-name>HiddenHttpMethodFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>


</web-app>

这样就能处理DELETE、PUT请求了。

二、处理list.jsp中删除功能的< a>标签

这里DELETE、PUT还有个要求是，通过POST方法转换。但是这里的删除是个< a>标签，而< a>标签的提交方法时get提交，所以需要写一个js函数。

这个js函数功能：在< a>点击后，将url传给当前页面的一个form表单，把这个url表单的action，实现POST请求这个url。

1.这里的js用到了两个，在web/WEB-INF下创建一个scripts文件夹，用来存放js代码。

在这里插入图片描述

这个jquert-1.9.1.min.js是提前准备好的。

2.在当前页面编写一个form和相应的js代码

<td><a class="delete" href="emp/${emp.id}">Delete</a></td>

<form action="" method="POST">
    <input type="hidden" name="_method" value="DELETE"/>
</form>

<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $(".delete").click(function () {
            var href = $(this).attr("href");
            $("form").attr("action",href).submit();
            return false;
        })
    })
</script>

现在的list.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".delete").click(function () {
                var href = $(this).attr("href");
                $("form").attr("action",href).submit();
                return false;
            })
        })
    </script>
</head>
<body>

    <form action="" method="POST">
        <input type="hidden" name="_method" value="DELETE"/>
    </form>

    <c:if test="${empty requestScope.employees}">
        当前没有数据
    </c:if>
    <c:if test="${!empty requestScope.employees}">
        <table border="1" cellspacing="0" cellpadding="10">
            <tr>
                <th>ID</th>
                <th>LastName</th>
                <th>Email</th>
                <th>Gender</th>
                <th>Department</th>
                <th>Edit</th>
                <th>Delete</th>
            </tr>
            <c:forEach items="${requestScope.employees}" var="emp">
                <tr>
                    <td>${emp.id}</td>
                    <td>${emp.lastName}</td>
                    <td>${emp.email}</td>
                    <td>${emp.gender == 0 ? "Female" : "Male"}</td>
                    <td>${emp.department.departmentName}</td>
                    <td><a href="emp/${emp.id}">Edit</a></td>
                    <td><a class="delete" href="emp/${emp.id}">Delete</a></td>
                </tr>
            </c:forEach>
        </table>
    </c:if>

    <br><br>

    <a href="emp">Add New Employee</a>
    

</body>
</html>

3.配置springmvc.xml使用静态资源

但是这时依然没有实现这个DELETE请求，因为使用js静态资源被拦截了，需要在springmvc.xml配置

<mvc:default-servlet-handler/>

<mvc:annotation-driven></mvc:annotation-driven>
<mvc:resources mapping="/scripts/**" location="WEB-INF/scripts/"/>

ok，这时候，就实现了DELETE的请求的发送

三、handler处理DELETE请求

编写这个删除方法即可，当然使用重定向redirect重定向到第一个方法/emps显示list.jsp

@RequestMapping(value="/emp/{id}",method = RequestMethod.DELETE)
public String delete(@PathVariable("id") Integer id){
    employeeDao.delete(id);
    return "redirect:/emps";
}

这样就完成了删除按钮的操作。

SpringMVC_14_RESTFUL_CRUD(四)实现删除数据DELETE

猜你喜欢