使用内部Servlet转发JSP后页面的JS,CSS等资源引入问题的解决

转载自:https://blog.csdn.net/weixin_44353336/article/details/90677792

问题原因

我们在进行web项目开发过程中,经常会在web页面引入一些JS,CSS,Jquery等资源,如图中所示的引入路径是以JSP所在路径为起点的相对路径,可能也是大家使用比较多的引入方式之一;

1 <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
2 <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
3 <script src="js/bootstrap.min.js" type="text/javascript"></script>

而在通常情况下,我们的JSP和这些资源文件的引入都是正常的,也就是说浏览器在解析页面的时候可以通过路径找到这些资源文件;而当我们在内部Servlet处理页面传回来的数据的时候,如果我们进行了请求转发,并且请求转发给了JSP(嵌入JAVA代码的JSP页面可以看成是一个Servlet),最后由JSP返回页面数据,那么这个过程是纯服务端操作,在客户端浏览器并不知情;

通俗点说,即假设A与B不在一个路径下且其外部资源路径都与自己同目录下存放,浏览器向A发起了一个请求,A不想干,让B去干,然后由B返回给浏览器结果,但是浏览器以为还是A发来的,这个时候浏览器还是把A所需要的外部资源给B,结果发现不是B所需要的!

request.getRequestDispatcher("login.jsp").forward(request,response);

因此在浏览器端地址仅仅定向到初始页面数据提交的Servlet路径,而在浏览器对返回的新页面进行解析的时候,也会以该路径作为参照点去解析页面中引入资源的相对路径,此时非常容易出现路径不匹配的问题,一旦路径匹配不成功,文件即引入失败,浏览器控制台也会出现报错信息;

解决办法一(推荐使用)

在实际开发中,我们通常会将这一类外部引入的资源文件放在web项目根目录下,因此可以在页面引入外部资源处将相对路径更改为绝对路径;

1 <!--注意绝对路径最前面的斜杠必须保留-->
2 <!--supermall是项目名称-->
3 <link rel="stylesheet" href="/supermall/css/bootstrap.min.css" type="text/css"/>
4 <script src="/supermall/js/jquery-1.11.3.min.js" type="text/javascript"></script>
5 <script src="/supermall/js/bootstrap.min.js" type="text/javascript"></script>
6 <!--如果希望代码可以多个项目共享,或者制作自己的代码库,可以使用自动获取项目名的方式-->
7 <script src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js" type="text/javascript"></script>
8 <script src="${pageContext.request.contextPath}/js/bootstrap.min.js" type="text/javascript"></script>

解决方法二

修改页面提交数据的Servlet路径使其与转发请求的JSP文件路径结构一致;例如本例中,css实际路径是"checkcode_jsp/css",而浏览器以为的路径是"/css",因此修改方式如下:

将页面提交的数据处理的servlet路径由"/login"修改为"/checkcode_jsp/login";

这种方式由于一个项目中代码中修改的地方比较多,并且其可扩展性不强,因此不推荐使用;

1 //修改Servlet类路径
2 @WebServlet(urlPatterns = "/checkcode_jsp/login")
1 <!--修改JSP表单提交路径-->
2 <form class="form-horizontal" action="/checkcode_jsp/login" method="post">

原文地址:https://www.cnblogs.com/FengZeng666/p/11737417.html

时间: 2024-10-07 16:51:22

使用内部Servlet转发JSP后页面的JS,CSS等资源引入问题的解决的相关文章

5秒后跳转到另一个页面的js代码

今天看视频学习时学习了一种新技术,即平时我们在一个页面点击"提交"或"确认"会自动跳转到一个页面. 在网上搜了一下,关于这个技术处理有多种方法,我只记下我在视频里学到的三种: 1.用一个response.sendRedirect("目标页面.jsp\.htm");实现直接跳转: 2.有时我们需要有点提示,比如"x秒后自动跳转,若没有跳转,请点击此处",则可以在myeclipse中调用Snippets中的Delay Go To

点击按钮(或超链接)如何跳转到另外一个页面并执行目标页面的js函数

页面跳转同时执行js代码$(function(){});url参数传递 标题的前半部分其实不必赘述,按钮也可以换成超链接.. 假设是需要在A页面上的一个按钮,点击后跳转到B页面,传一些参数后且并B页面的某个js函数可以执行~~ 关键在于如何跳转到目标页面之后并「接着」执行「目标页面的js函数」.原因是目标页面的某个js函数原来是需要点击该页面的按钮或超链接才能触发的,但现在需要在跳转到B页面后立即执行! 先不想是从A页面跳转到B页面,假设你想在B页面一打开就执行的话,是需要把代码逻辑写在$(fu

调用上一个页面的js方法

点击商品分类,弹出下框 点击确定,将选中的类别的name和唯一的code返回到上个页面 function save(){ var ids = getIdSelections(); jp.get("${ctx}/product/hzproduct/saveType?ids=" + getIdSelections()+"&id="+$.trim($("#idele").text()), function(data){ if(data.succ

提交后刷新本页面与移除本页面的JS写法

@section script { <script src="/res/js/webuploader.nolog.js" type="text/javascript"></script> <link href="/res/css/webuploader.css" rel="stylesheet" type="text/css" /> <script> var

父页面访问iframe页面的js

父页面:parent.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equi

使用Ajax异步加载页面时,怎样调试该页面的Js

前言-本人不是干前端的,所以有的名词不专业 在前端中,有时候会遇到这样的框架,http://172.17.11.151:8060/frontend/backend.html#1.html (通过解析URL,把1.html异步加载到指定位置),不知道这样的框架叫什么名字. 那我们就会遇到一个问题,调试1.html的时候怎么办,通过浏览器掉出控制台找不到1.Html页面,无法加断点啊. 解决办法 在1.html 你所要调试位置加上一句代码  debugger;  就可以了,就是这么爽 可以调试了,可

webview应用程序中的按钮调用html页面的js事件

public class MethodMutual extends Activity { private WebView mWebView; private Handler mHandler = new Handler(); private static final String LOG_TAG = "WebViewDemo"; /** Called when the activity is first created. */ @Override public void onCreat

不同终端实现自动跳转到相应页面的js代码

1 2 3 4 <script type="text/javascript">     if(/Android|webOS|iPhone|iPod|BlackBerry|Windows CE|ipad|Windows Phone/i.test(navigator.userAgent)){     if(window.location.href.indexOf("?pc")<0){try{window.location.href="/3g/

mui-webview-子页面调用父页面的js方法

子页面// 获取当前webviewvar self = plus.webview.currentWebview();var opener = self.opener();//此句调用父页面jsopener.evalJS('checkLoginStatus()'); 父页面function checkLoginStatus(){} 原文地址:https://www.cnblogs.com/yanyunliu/p/9698705.html