完美解决前端页面js,css,jquery引用不上的问题

最新推荐文章于 2022-07-06 18:18:18 发布
最新推荐文章于 2022-07-06 18:18:18 发布
阅读量3.8k 收藏 1
点赞数
分类专栏： java spring mvc 文章标签： jquery css 前端 jsp javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27646361/article/details/70239489
版权

jsp页面中头部加上：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

js,css引用加上：

<head>
    <meta charset="utf-8"/>
    <title>佰仟金融</title>
    <link href="<%=basePath%>/static/js/plugins/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <link href="<%=basePath%>/static/css/jquery.treetable.css" type="text/css" rel="stylesheet" />
    <link href="<%=basePath%>/static/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css" />
    <link href="<%=basePath%>/static/js/plugins/datatables/1.10.0/dataTables.bootstrap.min.css" type="text/css" rel="stylesheet" />
    <script src="<%=basePath%>/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="<%=basePath%>/js/jquery.min.js" type="text/javascript"></script>
</head>



本地idea引用不会存在引用不上的问题，当把项目打成war包发布到tomcat服务器上就出现js，css没用引用上的问题

jser_836690518
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端学习，html,css,js,jquery.zip
01-05
前端学习，html,css,js,jquery前端学习，html,css,js,jquery前端学习，html,css,js,jquery 前端学习，html,css,js,jquery前端学习，html,css,js,jquery前端学习，html,css,js,jquery 前端学习，html,css,js,jquery...
前端开发工程师面试题js，css,jquery,vue
最新发布
11-15
前端开发工程师面试题js，css,jquery,vue
nginx部署二级目录无法加载css和js问题解决方案
guiripei的专栏
07-06 9855
nginx部署二级目录无法加载css和js问题解决方案
css,js文件引入失败问题解决
xukaiqiang123的博客
02-25 1593
万能方法: file输入文件所在相对位置
datatables通过ajax重新加载数据
热门推荐
dongyuguoai的博客
06-23 3万+
一、效果图： 二、功能： 点击某行的“通过”按钮和“拒绝”按钮，分别调用两个不同服务接口，然后重新加载数据表，改行就消失了。 三、html代码（js、css依赖需手动添加） &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equ...
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
06-04
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
前端CSS-JS-jQuery的API-js库2个版本
03-02
前端CSS-JS-jQuery的API-js库2个版本
Web前端开发简明教程-源代码（HTML+CSS+JavaScript+jQuery）
06-09
利用html,css,cs,js等技术开发一个网站，这是网站源代码
jquery 动态加载css,js文件
我叫陈小皮。
11-07 1万+
动态加载css文件:$('#btn').click(function(){ $('head').children(':last').attr({ rel: "stylesheet", type: 'text/css', href: './style.css', }); })动态加载js文件: $.getScript(url,c
关于js文件引用后不生效的原因发现
生如夏花之灿烂
04-30 2万+
今天在编写gojs的demo时遇到一个奇葩问题，在jsp页面底部引用js文件时不生效，在引用的js中使用console.log(111)验证，始终没有打印，直接将js代码写在jsp中反而生效，网上查看了许多办法：将js放在body标签内引用，不生效！将jQuery引用删去，不生效！修改&lt;!DOCTYPE html&gt;标签，也不生效！最后在chrome的开发工具Network选项中加载de...
指向“http://localhost:8080/js/jquery/jquery-1.6.4.min.js”的script加载失败
z19799100的博客
03-23 1万+
对于这个问题我也是费了半天劲才弄出来的，我用的是springboot搭建的项目，前端也没有用繁重的jsp，而是应用了thymeleaf来实现和前端互动的，使用thymeleaf将引用的js等放到了static下，但这个只能有一层目录才行，如下： ...
jquery-min.js /jquery-1.8.3.min.js引入后报错
leo_pcx
03-28 2万+
项目中加入jquery-min.js /jquery-1.8.3.min.js文件后，就报红叉叉，看着就讨厌，原来项目就是用的这个文件都OK的。这样执行以下吧： 报错的文件--右键---myeclipse---exclude From Validation ，这样执行以下报错就没有了。
自己写Java Web遇到的坑（1）——JSP中的外部引用相对地址出错
lqadam的博客
10-27 516
在写JSP之前，一个网页需要表现成什么样，一般来说是要先写成html看一下的，我也是这么做的。然而，这个时候，第一个坑可能出现了。问题：在html中，外部引用的CSS和JS文件的地址全都是基于html文件的位置而写的相对地址（像这样：../css/style.css）。当我们把html原封不动搬到JSP上时，常会出现外部的各种引用地址不对的问题。 原理其中很可能的一个原因，就是这个相对地址，相对的
HTML+CSS+JS+jquery的校园表白墙前端页面
05-11
好的，下面是一个简单的校园表白墙前端页面的示例代码： HTML部分： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>校园表白墙</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <h1>校园表白墙</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">发布表白</a></li> <li><a href="#">表白排行榜</a></li> </ul> </nav> </header> <section> <div class="container"> <div class="post"> <h2>表白标题</h2> <p>表白内容</p> <p class="info">发布时间：2021年10月1日 12:00</p> </div> <div class="post"> <h2>表白标题</h2> <p>表白内容</p> <p class="info">发布时间：2021年10月1日 10:00</p> </div> <div class="post"> <h2>表白标题</h2> <p>表白内容</p> <p class="info">发布时间：2021年9月30日 12:00</p> </div> </div> </section> <footer> <p>© 2021 校园表白墙</p> </footer> </body> </html> ``` CSS部分： ```css body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #f8f8f8; padding: 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } header h1 { margin: 0; font-size: 36px; } nav ul { list-style: none; margin: 0; padding: 0; } nav ul li { display: inline-block; margin-right: 20px; } nav ul li a { color: #333; text-decoration: none; } section { padding: 40px 20px; } .container { max-width: 800px; margin: 0 auto; } .post { background-color: #fff; padding: 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-bottom: 20px; } .post h2 { margin: 0; font-size: 24px; margin-bottom: 10px; } .post p { margin: 0; } .post .info { color: #999; font-size: 14px; margin-top: 10px; } ``` JavaScript和jQuery部分： ```javascript $(document).ready(function() { // 获取表白列表 $.ajax({ url: 'http://example.com/api/posts', success: function(data) { // 将表白列表添加到页面上 for (var i = 0; i < data.length; i++) { var post = data[i]; var html = '<div class="post">' + '<h2>' + post.title + '</h2>' + '<p>' + post.content + '</p>' + '<p class="info">发布时间：' + post.time + '</p>' + '</div>'; $('.container').append(html); } } }); // 提交表白 $('#submit').click(function() { var title = $('#title').val(); var content = $('#content').val(); $.ajax({ url: 'http://example.com/api/posts', type: 'POST', data: { title: title, content: content }, success: function() { alert('表白成功！'); } }); }); }); ``` 以上代码仅供参考，具体实现还需要根据实际情况进行调整。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值