jsp页面的js路径不对

JSP页面中的JavaScript路径不正确通常会导致页面无法正确加载JavaScript文件，从而影响页面的功能。以下是一些基础概念、可能的原因、解决方案以及相关的应用场景。

基础概念

JSP（JavaServer Pages）：一种服务器端技术，用于创建动态网页。
JavaScript路径：指在HTML或JSP文件中引用JavaScript文件的URL路径。

可能的原因

相对路径错误：相对于当前JSP页面的位置不正确。
绝对路径错误：指定的绝对路径不正确或无法访问。
上下文路径问题：在Web应用中，未正确考虑上下文路径。
文件名拼写错误：JavaScript文件名拼写错误或大小写不匹配。
服务器配置问题：服务器配置可能导致资源无法正确访问。

解决方案

1. 检查相对路径

确保相对路径相对于当前JSP页面的位置是正确的。例如：

<script src="js/script.js"></script>

如果JSP页面在/webapp/page.jsp，那么js/script.js应该在/webapp/js/script.js。

2. 使用绝对路径

使用绝对路径可以避免相对路径的问题。可以通过${pageContext.request.contextPath}获取上下文路径：

<script src="${pageContext.request.contextPath}/js/script.js"></script>

这样可以确保无论JSP页面在什么位置，路径都是正确的。

3. 检查文件名和大小写

确保JavaScript文件名拼写正确，并且大小写匹配。例如，如果文件名是Script.js，引用时也应该是Script.js。

4. 使用EL表达式

在JSP中使用EL表达式来动态获取上下文路径：

<script src="${pageContext.request.contextPath}/js/script.js"></script>

5. 检查服务器配置

确保服务器配置允许访问静态资源。例如，在Tomcat中，确保web.xml中没有错误的配置阻止了对静态资源的访问。

应用场景

单页应用（SPA）：在单页应用中，JavaScript文件通常较大且复杂，正确的路径至关重要。
动态内容加载：在需要动态加载内容的页面中，JavaScript文件的正确加载直接影响功能的实现。
表单验证：前端表单验证通常依赖JavaScript，路径错误会导致验证功能失效。

示例代码

假设你的项目结构如下：

/webapp
  /js
    script.js
  /pages
    index.jsp

在index.jsp中正确引用script.js：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Example Page</title>
    <script src="${pageContext.request.contextPath}/js/script.js"></script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

通过以上方法，可以有效解决JSP页面中JavaScript路径不正确的问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

SpringBoot中jsp里面的静态资源js、css、images访问不到解决办法

参考：https://www.cnblogs.com/zfding/p/11766062.html 1、如果Springboot的项目用到了jsp页面，里面有些静态资源需要引用。..."> 4、当然就需要在static下面创建js文件夹，将jqeruy.js放在这个js文件夹下面。...=/static/** 备注：　　spring.mvc.static-path-pattern: spring.mvc.static-path-pattern，这个配置就是在访问静态资源的路径前面追加...spring.resources.static-locations: classpath:/static,classpath:/templates，这个是用以指定存放静态资源的路径，查找静态资源时会上面的路径下面开始搜索...或者实现了addResourceHandlers该方法里面的所示内容，那么静态资源引用的时候，前面要加上/static/的，不然无法进行引用。

4.4K2 1

jsp:include引入jsp文件的时候（如果被包含的文件存在js文件），不要用相对路径

原因就是路径问题。在集成时，我的思路是写一个公共JSP文件，里面包含一些常用的js文件，当然此处我用的就是Jquery插件了。...但写完发现单独测试公共JSP是可以使用的，但包含公共JSP页面的页面却始终不能使用JQuery，开始还以为是加载顺序的问题。几经测试，终于发现了其中的问题。...8″%> js/jquery132min.js”> JSP把JQuery的相对位置传给了自己的JSP，但自己的JSP以自身为标准，通过路径就找不到Jquery插件了。...简单地说，就是如果用相对路径，则公共JSP中的路径就应该是相对自己jSP的路径了。

2.7K1 0

WEB-INF目录下的jsp访问外部的css,js等配置文件

WEB-INF目录下的jsp访问外部的css,js等配置文件 1、项目目录结构： 2、解决方案 2.1 EL表达式实现 2.2 设置base标签 2.3 实现效果 3、总结 3.1 ${pageContext.request.contextPath...} 3.2 base标签 1、项目目录结构：我现在要在404.jsp页面访问webapp/commons目录下面的css和js 2、解决方案 2.1 EL表达式实现 jsp文件头部加上 jsp/jstl/core" prefix="c"%> 使用EL表达式获取项目路径...v=3.3.6"> 2.3 实现效果可以看到自定义的404页面样式已经生效。...3、总结 3.1 ${pageContext.request.contextPath} ${pageContext.request.contextPath}是JSP取得绝对路径的方法，等价于<%=request.getContextPath

1.6K2 0

基于maven+ssm的增删改查之带分页的显示员工相关信息（基于bootstrap）

jsp:forward page="/emps">jsp:forward> js/bootstrap.min.js" > （2）我们引入静态资源时，首先自定义APP_PATH来获得项目路径，最后整个静态资源比如bootstrap路径就是： /curd_ssm/static...取得员工信息时，首先取得里面的员工集合pageInfo.list，并取别名为emp，再取相应的属性。取分页信息时，直接使用pageInfo对象即可。（4）使用分页时，参考bootstrap模板。...启动服务器之后，输入localhost:8080/curd_ssm/，会先转到index.jsp页面，而index.jsp会请求/emps，跳转到list.jsp， ?

1.7K1 0

bootsrap+jquery+组件项目引入文件的常见报错报错一：Uncaught ReferenceError: $ is not defined报错二：jsp页面相对路径和绝对路径的问题：报错三：

图片.png 错误原因：文件加载的顺序不对，jQuery文件的顺序要在前面 ? 图片.png 方法：把jQuery文件写在所有script文件前面 ?...图片.png 报错二：jsp页面相对路径和绝对路径的问题：正常路径：html里面的../../，改成jsp页面就找不到路径了，这个时候成了这个鬼样子 ?... (app.js:42) at l (jquery.min.js:4) at Object.fireWith [as resolveWith] (jquery.min.js...:4) at Function.ready (jquery.min.js:4) at HTMLDocument.S (jquery.min.js:4) ?...jquery.min.js:4) 报错五：bootstrap.min.js:7 Uncaught Error: Bootstrap requires jQuery bootstrap.min.js:7

26.6K4 0

Mac+IDEA+百度富文本UEditor

需要嵌入一个富文本编辑器，基于大厂的光环，选择了百度富文本 UEditor，之前都是 Windows+Eclipse ，转到 Mac+IDEA 后，发现差别还是有的，不管大小，即使有一点不对，都不符合预期效果.../controller.jsp" 因为之前请求的是 jsp 下面的 controller.jsp。我们在第四步已经将该文件移出。因此需要修改。这也是解决图片上传提示后端服务器配置错误的一个方法。...06 启动项目，访问 index.jsp。 index.jsp 中注意引入 js、css 的路径修改，其余可以保持不变，测试 UEditor 是否可用。 ?...回答开头提出的问题 1 完成了引入，但启动后，页面没有富文本页面原因可能是 index.jsp 页面中没有修改 js、css 的路径。 ?...首先我们看配置文件 config.json ，就是那个之前被你揪出来放在外面的一个 json 文件。 ? imagePathFormat 就是基于项目发布后的路径，在后面继续添加的具体路径。

7771 0

绝对路径${pageContext.request.contextPath}用法及其与web.xml中Servlet的url-pattern匹配过程

以系统的一个“添加商品”的功能为例加以说明，系统页面为add.jsp，如图一所示：图一添加商品界面系统的代码目录结构及add.jsp代码如图二所示： {pageContext.request.contextPath...如图二中【没有使用框架】的form表单的action属性为：action="图二系统的代码目录结构及add.jsp代码 ${pageContext.request.contextPath}用于解决使用相对路径时出现的问题...}返回的是”/test”【注意：很多地方写的返回值是“test/”，这是不对的】，拼接之后路径就变成：“/test/bookcover/101.jpg”。...如果使用相对路径则为：“../../bookcover/101.jpg”（相对于add.jsp页面）。其他的CSS文件、Js文件、Jsp文件与图片文件相似，使用方法一样。...在JavaWeb项目中，Jsp页面的form表单的action属性也常常会使用${pageContext.request.contextPath}来表示请求路径。

9583 0

cultural context_servlet访问路径

以系统的一个“添加商品”的功能为例加以说明，系统页面为add.jsp，如图一所示：图一添加商品界面系统的代码目录结构及add.jsp代码如图二所示：图二系统的代码目录结构及add.jsp代码...}返回的是”/test”【注意：很多地方写的返回值是“test/”，这是不对的】，拼接之后路径就变成：“/test/bookcover/101.jpg”。...如果使用相对路径则为：“../../bookcover/101.jpg”（相对于add.jsp页面）。其他的CSS文件、Js文件、Jsp文件与图片文件相似，使用方法一样。...在JavaWeb项目中，Jsp页面的form表单的action属性也常常会使用{pageContext.request.contextPath}来表示请求路径。...在这种情况下Servlet路径是请求的URI去掉上下文路径并且路径信息为null。

1.1K2 0

jsp页面有关路径加载问题

问题一：可以看到这个背景图片在idea目录路径中是正确的。前面(idea-Tomcat扩展)文章已经说那个虚拟路径是所有jsp文件的根。 ...F12之后看到最后它找的路径和Idea目录中的路径不同所以找不到该资源。解决方法：再添加一个外部路径。...问题二：登录主页，在提交表单后，处理页面(doLogin.jsp)在确认用户名或密码错误后转发回来，不是重定向。...如果如上图这样写，只有在第一次就登录成功的情况下才会正确跳转到展示页面，否则在用户名或密码错误后转发回来的页面再登录成功或者失败都会报404！那是因为通过转发后页面提交的路径就不对了！...解决方法：将相对路径改为绝对路径 /onWeb为虚拟路径，查看自己的虚拟路径名。或者使用request.getContextPath()获取根路径

2221 0

java开发_模仿百度文库_FlexPaper

之前做了前面的两步：第一步：java开发_模仿百度文库_OpenOffice2PDF_源码下载第二步：java开发_模仿百度文库_SWFTools_源码下载现在是最后一步了，就是把我们的swf显示在网页上面...不过路径在设置的时候，就需要注意啦..... 3.新建一个jsp文件 index.jsp 1 2...="text/javascript" 11 src="${pageContext.request.contextPath}/flexpaper/flexpaper_flash.js...24 FitPageOnLoad : true, //(布尔) 适合初始页大小(依高度而定)的装载页。如同在工具栏上使用fit-page按钮的效果。...25 FitWidthOnLoad : true, // (布尔)适合初始页宽度大小的装载页。如同在工具栏上使用fit-width按钮的效果。

7461 0

【手把手】JavaWeb 入门级项目实战 -- 文章发布系统（第四节）

首先，更正一下上一章中的一个小错误，就是在index.jsp中，banner部分没有添加结束的标签,加上去就OK了，我也是完善页面的时候发现的。...JSP页面就是一个servlet，但是省去了很多写Servlet的麻烦，login.jsp已经写好了，就放在WebContent目录下。 ? 昨天憋了一上午，总算写好了登陆页面。...而且js和css都是写在本页面的。实际开发一般都不会这么做。所以，我把这些东西都分离出来了，放在各自的目录里。以下是新的目录结构： ?...注意，这种引入就相当于把里面的代码原封不动地拷贝进去，所以如果用相对路径引用资源文件，就还是以原本的页面为准。引入方式： JSP到controller层让我们打开login.jsp页面，引入jQuery js/jQuery.js"> 登录框的

1K5 0

JavaWeb新手进阶经典项目 & 半小时高效开发 & 海量知识点涵盖 (二)

Page=1">第一页 jsp?...Page=">下一页 jsp?...Page=1">第一页 jsp?...Page=">下一页 jsp?...将新上传到服务器中的图片路径存储到数据库的图片字段中。将新的路径响应给前端，进行图片回显。

1.2K2 0

H5网页播放器EasyPlayer.js播放器界面的加载效果无法消失是什么原因？

为了满足用户的个性化需求，EasyPlayer拥有多个版本，如EasyPlayer-RTSP、EasyPlayer.js、EasyPlayerPro等，并且EasyPlayer还拥有Windows、Android...、iOS版本，EasyPlayer.js还可支持Linux平台。

1.7K2 0

SpringMVC 操作Ajax使用学习笔记整理；

zhang / hang : zhang / hang + 1; // 根据总行计算出总页数; // 当前页 > 总页则等于总页; if (dye > zye && zye!...页面通过JS 解析进行数据展示！...例如: @RequestMapping(value="xxx",produces="application/json;charset=UTF-8") value=是请求的路径 produces=后面是编码格式...-- 使用AJAX当前要JS了!! 要注意静态资源的加载哦~SpringMVC！这里使用的是绝对路径防止地址引用失败！...406异常: 浏览器不接受所请求页面的MIME类型(一种媒体文件的类型eg: text/html application/json ); 主要可能是因为 value=”/xx.html“ 类似的请求,

1351 0

kindeditor

file 0x03 漏洞利用 google搜素一些存在的站点 inurl：kindeditor 1.查看版本信息 http://www.xxx.org/kindeditor//kindeditor.js...2.版本是4.1.10可以进行尝试如下路径是否存在有必要验证文件 upload_json.* kindeditor/asp/upload_json.asp?...dir=file 4.写出下面的构造上传poc,这里需要修改…以及url : 的内容,根据实际情况修改.... Uploader js... 5.用浏览器打开,然后开启bupsuit进行拦截发送,可以看到成功上传txt文件 6.同时也可以上传.html文件,这里就是攻击者最喜欢上传的文件(里面包含了各种暗页连接地址

3.8K2 0

重学SpringBoot系列之整合静态资源与模板引擎

---- 欢迎页面 SpringBoot支持静态和模板欢迎页，它首先在静态资源目录查看index.html文件做为首页，若未找到则查找index模板。...当然企业可以通过规范的方式去限制，不允许在jsp页面写java代码，但这只是规范层面的事，实际怎样无法控制。...，然后拼接静态资源路径。...（官方3.0后不推荐）值得注意的是，使用替换路径th:replace 开头请勿添加斜杠/，避免部署运行的时候出现路径报错。...内联表达式仅在页面生效，因为Thymeleaf只负责解析一级视图，不能识别外部标签JS里面的表达式。

5.2K3 1

03 整合IDEA+Maven+SSM框架的高并发的商品秒杀项目之web层

编写一个公共的头部jsp文件，位于WEB-INF/jsp/common下的head.jsp，如下图： ? head.jsp里面的代码请参照项目的源代码。...编写一个公共的jstl标签库文件tag.jsp，在下图所示的位置。 ? tag.jsp里面的代码请参照项目的源代码。编写列表页面list.jsp，在下图所示的位置。 ?...list.jsp里面的代码请参照项目的源代码。编写秒杀详情页面detail.jsp，在下图所示的位置。 ? detail.jsp里面的代码请参照项目的源代码。...## 添加 seckill.js 文件添加 seckill.js 文件，在下图所示的位置。 ? seckill.js 里面的代码请参照项目的源代码。...点击相应商品后面的详情页链接即可查看该商品是否开启秒杀、以及秒杀该商品等活动。到此，我们成功完成了web层的开发。

1.3K5 0

SpringMVC中url-pattern 和*的区别「建议收藏」

最后发现是自己配置的 url-pattern 不对！现整理一下：（1）：在使用springmvc时，都会在web.xml中配置一个dispatchservlet，如下：会匹配到/login这样的路径型url，不会匹配到模式为*.jsp这样的后缀型url ②：/* 会匹配所有url：路径型的和后缀型的url(包括.../login,*.jsp,*.js和*.html等) ①：地址为 localhost:8088/login , /login 返回login.jsp 访问去Controller下的/login 跳转到相应的视图...login.jsp ②：访问的地址为 localhost:8088/login/ ，/login 返回login.jsp 访问去Controller下的/login,跳转到login.jsp ，.../login.jsp 的Mapping映射，则会报404 错误！

1.1K2 0

8.实战篇_关于前端路由

写在前面的话：有的读者提意见“文字太多，图片太少，不活泼可爱”，我已经尽力了。...1.一张图理解“页面路由” 这就是页面路由，很古老的J2EE开发，一般一个页面路由就对应一个jsp——我菊花厂很多产品就这样。...2.再用两张图理解“前端路由” 在WebAPP的世界里，单页系统比较常见。单页系统的好处？快、动效多，超不多就这些优势吧。这样给用户一个困扰，怎么在界面上点了半天，浏览器的地址为啥没变呢？...5.代码路径 https://github.com/JHerculesqz/demo-js-vue/blob/master/1.platform/src/main.js https://github.com.../JHerculesqz/demo-js-vue/blob/master/1.platform/src/router/index.js https://github.com/JHerculesqz/demo-js-vue

7297 0

6.3 Spring Boot集成mongodb开发小结

，路径配置错误，bean就不会创建了。.../copyright.jsp">jsp:include> js/views/blog/config" src="js/libs/require/require.js.../copyright.jsp">jsp:include> js/views/blog/config" src="js/libs/require/require.js.../copyright.jsp">jsp:include> js/views/blog/config" src="js/libs/require/require.js.../copyright.jsp">jsp:include> js/views/blog/config" src="js/libs/require/require.js

4.1K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云