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";
}
这样就完成了删除按钮的操作。