action跳转页面css和js失效问题解决

最新推荐文章于 2020-05-21 14:04:18 发布
最新推荐文章于 2020-05-21 14:04:18 发布
阅读量1.2k 收藏
点赞数 1
分类专栏： Struts2

页面转自：http://blog.csdn.net/javaimport/article/details/6679513

当你在某个jsp页面跳转到action执行操作以后,再返回页面发现css和js全部失效,要刷新才能重新加载


问题原因在于action跳转回来以后的目录路径是你的action所配置的目录 如  /项目名/users.do


获得一下本地的绝对路径就可以解决


下面是解决方法

[html]  view plain copy print ?
  1. <%  
  2.     String path = request.getContextPath();  
  3.     String basePath = request.getScheme() + "://"  
  4.             + request.getServerName() + ":" + request.getServerPort()  
  5.             + path + "/";  
  6. %>  
  7.   
  8. <link rel="stylesheet" type="text/css" href="<%=basePath%><span style="color:#FF6666;">css/style.css</span>" />  


注意红字部分是你的css文件所在的文件夹和文件名  不要忘记修改就 run


如果小脚本<% %>的内容报错  说明你的jstl没有导入 自行加入jstl的jar就可以
shang674544686
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
引入Strust2后jsp无法调用action报错404的问题
qq_36821441的博客
06-14 284
今天在写代码的时候，想引入Strust写个导出个excel文件，但是在jsp写好后出现了404问题。 明显的action方法写错了，我的jsp是这么写的： <form action="writeExcel_write" method="post"> <input type="submit" value="导出为xml文件"/> </form>...
jsp：细节:修改form表单的action值不成功
CC__boy 的博客
09-10 1596
  错误描述：          （1）在js中修改Form的action：                  fm.action = "menuTraceSqlSave.jsp?SQL="+sqlstr;（fm为Form的name属性）         （2）submit后，页面没有反应，看控制台报错：对象不支持此属性或方法                     Form肯定有acti...
Struts2中<jsp:forward page="xxx.action"></jsp:forward>失效，3种解决方案
jCuckoo的专栏
09-15 3827
问题： 在Struts2中失效了，不但调转不过去还报404错误。不知道是Struts2中不支持还是需要其他的配置。 原因： 因为struts2采用过滤器的方式处理请求，默认情况时监控url地址的变化 解决办法 1、配置web.xml 解决
struts2跳转后css和js失效的问题解决思路及实现步骤
09-22
在使用struts2的action执行后跳转到的jsp显示的时候其中的css不起作用, 这一点让很多的网友大失所望，本文整理了一些可以解决问题的方法，感兴趣的你可千万不要错过，希望本文对你有所帮助
编写html5时调试发现脚本php等网页js、css等失效
09-28
总的来说，解决HTML5与PHP结合使用时js和css失效的问题，主要在于正确处理页面跳转和资源请求，确保浏览器总是获取最新的服务器资源，而不是使用过期的缓存。通过以上的方法，可以有效避免因缓存导致的网页显示异常...
jsp文件中引用外部.css或.js文件的路径问题.pdf
11-23
在jsp文件中引用外部.css或.js文件的路径问题可以通过三种方法解决：使用相对于jsp页面的相对路径、使用相对于Web工程的相对路径和使用Web工程的绝对路径。每种方法都有其优缺点，我们需要根据实际情况选择合适的...
struts2 路径问题
04-21
2. **结果类型**：Action执行后，通常会跳转到一个新的页面或资源，这由结果类型决定。常见的结果类型有dispatcher（dispatcher是默认的，用于转发到一个JSP或Freemarker模板），stream（用于处理文件下载），...
<form>标签action跳转后，jquery失效的问题
06-28 742
如题，当你在某个jsp页面的标签执行了action操作以后，再返回页面发现页面格式的css和js全部失效，针对这一问题，解决方法就是把jsp中标签中与页面格式有关的css和js文件的引用均改成绝对路径形式。    如原来的css和js文件引入写法为： <link rel="stylesheet" href="bootstrap.min.css" > <script type="text/javasc
<s:action>标签的用法
abcdefpm的博客
07-07 478
使用action标签,可以允许在jsp页面中直接调用Action,在调用Action时候,可以指定需要被调用的Action的name和namespace.如果指定了executeResult参数的属性值为true,该标签会把Action的处理结果(视图资源)包含到本页面中. 使用action标签指定属性有: id: 可选属性,作为该Action的引用ID name:必选属性,指定调用
jsp：跳转后页面css和js失效问题解决
qq_18415779的专栏
08-06 3845
script type="text/javascript" src="js/jquery-1.5.1.js">script>  改： script type="text/javascript" src="/wechat3/js/jquery-1.5.1.js">script>  要使用绝对路径
解决SSM网站项目所有js、css无法引用问题
pz641的博客
05-21 984
不是路径的问题，是web.xml配置问题 懒人配置url-pattern是 /,所以才出了问题 <servlet> <servlet-name>dispatcherServlet</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <!-- 同时加载Spri
JQuery Mobile跳转页面后css和js失效
siriva的博客
10-09 2169
最近使用JQuery Mobile编写手机端页面时遇到一些问题 问题：从一个页面点击一个链接进入到另一个页面时，发现这个页面的css和js都失效，且这两个页面都加载了JQuery Mobile的js和css库。 原因：在JQuery Mobile中，页面跳转时默认使用ajax跳转，而页面跳转时默认使用ajax跳转时，只会把在中也内容加载，而之外的代码及文件则不会加载，以致外的js和c
解决jsp请求转发后前端页面css样式消失以及js不起作用的问题
读书札记2022的博客
03-16 3468
注意：本人使用的是最后一种方法解决的问题，直接拉到最后看解决方法。 使用请求转发导致前端页面css样式消失解决办法 java新手系列,如果文中有不对的地方,请大佬们指出,我会及时改正的 [ 鞠躬了！] 遇见的问题 1.前端出现问题的css引入路径 <link href="../Style/StudentStyle.css" rel="stylesheet" type="text/css" ...
Struts里从action跳到前台jsp页面后CSS样式失效的解决办法
一介草民的代码空间
05-28 945
在jsp页面调用外部css样式的时候，如果是从后台跳到这个页面的话，css的样式会失效， 这是因为路径问题，因为是经过后台处理后再跳转，相对路径会发生改变， 所以jsp页面在调用外部css样式的时候要采用绝对路径如： 如果是这种方式导入样式的话就会失效 所以在编码的时候最安全的写法就是只要调用外部样式，就在路径前加上${pageContext.request.context
jsp:forward跳转action 404错误
paladin1988的专栏
04-12 262
前台index.jsp页面跳转action，result结果为404错误   index.jsp &lt;body&gt; &lt;jsp:forward page="${basePath}/pageToJson.action"&gt;&lt;/jsp:forward&gt; &lt;/body&gt;     服务器和客户端的区别吧 &lt;jsp:forwa...
Jsp访问action
superlidengke的专栏
11-09 467
s:action name="nav_newGoods" namespace="/market" executeResult = "true">s:action> executeResult:可选属性，表示要不要将action的响应包含到本页面，默认不包含。 s:action name="getAffiches" namespace="/market">s:action>
HTML+CSS+js做一个登录和注册页面
最新发布
06-01
好的，以下是一个简单的登录和注册页面的 HTML、CSS 和 JS 代码示例： HTML 代码： ``` <!DOCTYPE html> <html> <head> <title>Login and Register Form</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <div class="form-container"> <form id="login" class="form"> <h2>Login</h2> <label for="username">Username</label> <input type="text" id="username" name="username" placeholder="Enter your username"> <label for="password">Password</label> <input type="password" id="password" name="password" placeholder="Enter your password"> <button type="submit">Login</button> </form> <form id="register" class="form"> <h2>Register</h2> <label for="new-username">New Username</label> <input type="text" id="new-username" name="new-username" placeholder="Enter your new username"> <label for="new-password">New Password</label> <input type="password" id="new-password" name="new-password" placeholder="Enter your new password"> <button type="submit">Register</button> </form> </div> </div> <script src="script.js"></script> </body> </html> ``` CSS 代码： ``` * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: #F2F2F2; } .container { display: flex; justify-content: center; align-items: center; height: 100vh; } .form-container { display: flex; flex-direction: column; background-color: #FFFFFF; padding: 30px; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); } .form { display: flex; flex-direction: column; } h2 { margin-bottom: 20px; } label { font-size: 16px; margin-bottom: 5px; } input { padding: 10px; border: none; border-radius: 5px; margin-bottom: 20px; } button { padding: 10px 20px; background-color: #4CAF50; color: #FFFFFF; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #3E8E41; } ``` JS 代码： ``` const loginForm = document.getElementById("login"); const registerForm = document.getElementById("register"); loginForm.addEventListener("submit", (event) => { event.preventDefault(); const username = loginForm.elements.username.value; const password = loginForm.elements.password.value; // TODO: perform login action }); registerForm.addEventListener("submit", (event) => { event.preventDefault(); const newUsername = registerForm.elements["new-username"].value; const newPassword = registerForm.elements["new-password"].value; // TODO: perform register action }); ``` 在这个示例中，我们使用了 HTML 的表单元素来创建登录和注册表单，使用 CSS 来美化页面，使用 JS 来处理表单提交事件，并执行登录和注册操作。当用户点击登录或注册按钮时，JS 代码会获取表单元素中的值，然后执行相应的操作。你可以根据自己的需求来修改代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值