Servlet进行请求转发后CSS样式失效

问题:在Servlet中进行请求转发后,跳转至目标页面(例register.jsp),但是页面的CSS样式失效,页面混乱。这个问题如果是重定向的不会出现。

那么我们就要看下请求转发了,请求转发是客户端发送请求,Servlet做出业务逻辑处理。然后Servlet调用forword()方法,服务器Servlet把目标资源返回给客户端浏览器。
更多关于请求转发和重定向的内容参考:https://blog.csdn.net/qq_34111779/article/details/78164027
在这里插入图片描述
原因是目标页面原来引用资源(cssd等)的相对路径是当前目标页面相对于资源文件的相对路径。而Servlet跳转时,页面(例register.jsp)的路径是这个Servlet的相对路径,浏览器中的地址栏并不会跳转到目标页面。

如:原页面http://localhost:8080/lab/view/login.jsp
请求转发后跳转至目标页面后浏览器中地址栏:http://localhost:8080/lab/login?action=toRegister
样式失效,页面内容混乱
在这里插入图片描述

而单独打开目标页面,页面的CSS和JS样式是生效了的
目标页面地址http://localhost:8080/lab/view/register.jsp
在这里插入图片描述

解决方案:
在网页之间加入以下代码即可:

<%
    String path = request.getContextPath();
%>
<link href="<%=path%>/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<%--path是拿到的是你的web项目的根路径--%>

上面方法获取的是相对路径,如果要获取绝对路径,在网页之间加入代码:

<link href="/lab/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/><%--原来的样式引用--%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%--path是拿到的是你的web项目的根路径(如果样式文件放在项目里面,那么在link里加path就可以了),basePath是绝对路径--%>
<base href="<%=basePath%>">
<link href="<%=basePath%>/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">

我们在网页加入代码,看看request.get…方法具体的输出:

<div class="text-center">
    <h5>看看path = request.getContextPath()=<%=request.getContextPath()%></h5>
    <h5>看看request.getScheme()=<%=request.getScheme()%></h5>
    <h5>看看request.getServerName()=<%=request.getServerName()%></h5>
    <h5>看看request.getServerPort()=<%=request.getServerPort()%></h5>
    <h5>看看basePath=<%=basePath%></h5>
</div>

可以看到各个方法的返回结果。
在这里插入图片描述

同样情况下请求转发中显示页面的超链接等也可能出现失效的情况,例如login.jsp和register.jsp在同一级目录,在login中跳转到register的相对路径为href="register.jsp"的时候,如果当前login页面是请求转发而来的,此时超链接就会失效,为避免这种情况出现,在可能出现请求转发的网页中所有的引用链接的相对路径应该填写根目录的相对链接,这是较为保险的写法。

这是首篇个人原创博文,边学习变总结,其中难免有错漏,欢迎指出。

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值