1、问题描述

想在项目中使用jquery，于是从jquery官网下载了最新版本（手动从浏览器中复制到本地的js文件中），并在html文件中添加了引用。目录及引用情况如图。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Insert title here</title><script src="../static/jquery.min.js"></script><script type="text/javascript">function btnLoginClick() {if (typeof jQuery !== 'undefined') {alert("Loaded success.");} else {alert ("Not yet.");}}</script>
</head>
<body>
<button onclick="btnLoginClick()">Click me</button>
</body>
</html>

运行起来一直提示jQuery没有加载。
将script引用换成远程引用就没有问题。

<script src="http://code.jquery.com/jquery-latest.js"></script>

2、解决方案

网上搜了很多资料，有说是从浏览器copy的文本有问题的，但我直接下载别人的js文件也不行。有说是文件编码格式的问题的，但是我确认了html文件和js文件编码格式都是utf-8，加载还是失败。
后来搜资料时发现别人引用js文件的路径跟自己的不太一样（我是直接将js文件拖到html文件中，IDE自己生成的引用路径），遂怀疑是路径的问题。将自己写的脚本移到单独的js文件中，再在html中添加引用。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Insert title here</title><script src="../static/jquery.min.js"></script><script src="../static/myScript.js"></script>
</head>
<body>
<button onclick="btnLoginClick()">Click me</button>
</body>
</html>

发现一样加载失败，故确定是路径的问题。
搜索正确的路径引用的姿势，参考这篇文章，将路径改为

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Insert title here</title><script src="./jquery.min.js"></script><script src="./myScript.js"></script>
</head>
<body>
<button onclick="btnLoginClick()">Click me</button>
</body>
</html>

加载OK。

PS:
另外一个项目中按照上面设置还是加载失败，发现是使用了shiro的缘故。需要在shiro的FilterChain中添加拦截规则，让静态资源可以匿名访问。

@Bean
ShiroFilterChainDefinition shiroFilterChainDefinition() {DefaultShiroFilterChainDefinition definition = new DefaultShiroFilterChainDefinition();definition.addPathDefinition("/js/**", "anon");definition.addPathDefinition("/login", "anon");definition.addPathDefinition("/**", "authc");return definition;
}

SpringBoot html中引用本地js文件失败的问题相关推荐

Angular7中引用外部JS文件
Angular7中引用外部JS文件,步骤如下: 1. 将引入的js文件放到项目的src/assets下 2. 在angular.json文件中找到scripts项并配置js文件的相对路径 3. 在sr ...
vue 引用src中的文件_Vue中引用第三方JS文件
使用Vue时会经常使用jQuery.bootstrap这类第三方工具库,而boostrap的渲染不仅依赖于jQuery js文件的加载,也依赖于HTML中DOM树内容的加载.但Vue中DOM树是有Vu ...
在js文件中引用别的js文件的方法
在js文件中用如下语句: document.write('<script src="abc.js"></script>'); 引用CSS文件亦同理.
ci框架中引入css,php ci框架中加载css和js文件失败的原因和解决方法
php ci框架中加载css和js文件失败的原因和解决方法发布时间:2021-07-01 12:08:38 来源:亿速云阅读:50 作者:chen 本篇内容介绍了"php ci框架中加载 ...
vue引用自定义.js文件（常量抛出 + 地址三级联动为例）- 语法篇
文章目录 vue如何引用`自定义封装的` `.js`文件? `如何操作,详细如下.`(注意代码注释部分:注意1/2/3/4/5) 一.效果图预览: 二.以自定义`area.min.js`文件为例: 三 ...
VSCode中，新建js文件中编译器自带jQuery提示失效的解决方法
VSCode中,新建js文件中编译器自带jQuery提示失效的解决方法在VSCode中,新建js文件可能会发生VSCode自带的jQuery提示引起失效,如下图在HTML文件中进行编辑,<s ...
AS引用本地aar文件
们在使用Android Studio构建项目的时候会使用到aar文件,它和jar文件其实差不多,jar文件是单独只有项目清单,而aar文件是谷歌新弄出来的一种文件,它不仅包括项目清单,还包括资源文件, ...
html调用外部js文件乱码,引用的js文件有中文时乱码
Javascript 代码比较多时,通常把代码保存到一个独立的 js 文件中,这样不但利于减少 html 文件长度好布局修改,而且利于搜索引擎蜘蛛抓取.把 Javascript 代码放到 js 文件后 ...
Vue 中引用第三方js总结
vue中引用第三方js总结 By:授客 QQ:1033553122 实践环境 win10 Vue 2.9.6 本文以引用jsmind为例,讲解怎么在vue中引用第三方js类库基础示例 1.把下载好的 ...

SpringBoot html中引用本地js文件失败的问题

1、问题描述

2、解决方案

SpringBoot html中引用本地js文件失败的问题相关推荐

最新文章

热门文章