一、需求
两个操作,url为stu/{id} 的方式为DELETE的删除操作,然后请求转发到list界面,或者直接在list界面添加删除操作的超链接!点击即删!
我们知道超链接的请求方式都为get,而DELETE请求要由POST转变,所以我们这里要用jquery实现将其转变为post请求,然后由hiddenHttpMethodFilter转变为DELETE请求!
二、代码
首先我们导入jquery,导入此js文件到
试着访问这个文件试试发现有404错误,错误如下
表示DispatcherServlet没有发现这个url的映射!这个js被拦截了
再提下/*和/的区别:
<url-pattern>/*</urp-pattern> 匹配所有路径
<url-pattern>/</urp-pattern>匹配除*.jsp这样的后缀类型url之外的所有路径,REST风格是不希望带后缀的! 所以这种符合REST风格
所以即使我们设置成后面那种还是会被拦截!
解决办法:在SpringMVC的配置文件中配置
<mvc:default-servlet-handler/>
和mvc:controller相同情况,我们这里还是要加上
<mvc:annotation-driven></mvc:annotation-driven>
为什么要添加这两个代码?
因为当SpringMVC找不到这和uri映射时会报错,当我们配置了这两项,default-servlet-handler将会在SpringMVC上下文中定义一个DefaultServletHttpRequestHandler,它会对Dispatcher处理的uri进行筛查,如果发现某个请求是没有经过映射的,就交给web应用服务器配置的默认Servlet来处理,默认名称为default(配置信息可以在tomcat安装目录下的conf文件夹下web.xml中找到!),如果不是静态资源请求,再交给DispatcherSercvlet, 若使用默认servlet默认的名称不是default,可以在代码中配置!
添加后我们访问放在webapp下的js文件(仅仅是试验用):
访问成功,之前是找不到映射错误!
在index.jsp使用jquery写的代码:
也成功显示
jquery使用成功!
后面遇到的bug处理了一下午,遇到了好多问题,慢慢道来:
第一个问题是我的js文件的相对位置写错了
在list中的相对是应该写本文件的目录的外层目录下的static下,故应为:
../../statics/js/jquery-3.3.1.min.js
还有其他几个问题就是get的超链接请求方式由get转为post的错误后访问目标页面遇到的,之前按照视频中讲解的那样根本行不通,(不知道老师是怎么能成功的,反正我的一直没用,还是以get的方式请求!)
视频中的做法:
在list.jsp添加操作超链接
<td><a href="">删除</a><strong>|</strong><a href="">修改</a></td>
然后再添加控制器映射方法:
/* delete */
@RequestMapping(value = "/stu/{id}", method = RequestMethod.DELETE)
public String delete(@PathVariable(value = "id") Integer id){
studentDao.deleteStudentById(id);
return "redirect:/stus";
}
在web.xml中配置hiddenHttpMethodFilter,然后再在界面上将超链接请求的get方式转为post请求,在list.jsp中修改删除超链接为:
<a class="delete" href="stu/${stu.id}">删除</a>
添加一个表单
<form>
<input type="hidden" name="_method" value="DELETE">
</form>
修改js代码:
<script type="text/javascript">
$(function () {
$(".delete").onclick(){
var href = $(this).getAttribute("href");
$(form).attr("action", href).submit();
return false;
}
})
</script>
这样做就有很多问题了
NO.1: 最后访问controller的还是get的方式
解答:据我在代码中试验,在超链接中写好href,即使是有相应事件也是先超链接以get的方式访问先,再响应点击事件,前面的访问就会报错,所以后面不一定能响应事件。解决办法就是这样:
<td><a href="#" onclick="postForm(${stu.id})">删除</a>|<a href="">修改</a></td>
添加响应事件的方法(因为要获悉删除的是哪一个学生的信息,所以要传入学生学号作为形参):
function postForm(id) {
var form = $('<form method="POST" action=""></form>');
var href = $(".delete").attr("href");
form.attr("action", "/stu/"+id);
$(document.body).append(form);
form.append('<input type="hidden" name="_method" value="DELETE"/>');
form.submit();
}
这样就可以将get请求转换为post请求了!
NO.2: 后续操作中 HiddenHttpMethodFilter将Post请求转变为DELETE,访问到映射方法,然后再转到相应的jsp页面,可是jsp页面也只支持get和post两种请求方式,访问会出现:
错误,该如何解决呢?
解决办法,查阅资料知道一种办法就是在jsp上面添加代码(还有人说在映射方法上面加上@ResponseBody(),不过都说是只针对tomcat7或以下的,我的是8.x的,显示的页面只有一个 被映射方法返回的字符串!):
<%@ page language="java"--%>
<%--pageEncoding="UTF-8" isErrorPage="true"%>
重点是
isErrorPage="true"
运行点击删除键:
删除一条内容:
成功,至于为什么要加句isErrorPage,原因就是不能请求,产生错误就跳到错误页面本身。。。
写完踢球。。