无法载入JavaScript档案

Question

我正在使用Spring MVC，Thymeleaf，并想在我的html文档中导入一个javascript文件。 尽管所有链接均已正确设置，并且文件显示在我的浏览器的调试视图中，但它们不会加载。 HTML中有以下JS，应该调用日期选择器，但未显示：

<script th:inline="javascript">
/*<![CDATA[*/
  $( function() {
    $( "#datepicker" ).Datepicker(
      );
  } );
/*]]>*/
</script>

通过以下方式包含文件：

  <script type="text/javascript" th:src="@{/resources/js/file.js}"></script>

CSS文件只要更改了类型就可以正常工作。

任何想法如何解决这一问题？

在Chrome调试中显示错误

现在，我从导入中删除了所有不必要的js文件，并显示以下错误：

更精确的错误

这表明使用了jquery-1.12.4。

Answer 1

答案：

1） <th:block></th:block>没有区别

2）对html标签的添加

xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"

没有区别

3）将带有内容的脚本标签放置在正文的底部与将其放在头部的相同

4）我在该项目中使用Bootstrap，并在Bootstrap的div中使用了datepicker。 将其放置在体内其他位置而不是在div内后，它起作用了。

结论：如果您正在使用Spring MVC和Thymeleaf，并且想要包含JavaScript文件，则需要：

1） <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >

2） <link th:href="@{/resources/.../file.css}" rel="stylesheet" type="text/css"/>

3） <script type="text/javascript" th:src="@{/resources/.../file.js}"></script>

4）确保以下文件不会“覆盖”您的JS或CSS文件

感谢您的时间和@Parth的帮助！

Answer 2

使用Spring和Thymeleaf时，建议使用以下项目结构：

src
   |-main
       |-resources
           |-static
           |   |-css
           |       |-bootstrap.min.css
           |       |-application.css
           |   |-images
           |   |-js
           |       |-jquery-3.1.1.js
           |-templates

然后，在模板中包含不同的资源将如下所示：

<head>
    <link href="../static/css/bootstrap.min.css" rel="stylesheet" media="screen"
          th:href="@{/css/bootstrap.css}"/>
    <link href="../static/css/application.css" rel="stylesheet" media="screen"
          th:href="@{/css/application.css}"/>

    <script src="../static/js/jquery-3.1.1.js"
            th:src="@{/js/jquery-3.1.1.js}"></script>
</head>

无法载入JavaScript档案

问题描述

2 个解决方案

解决方案1
0 2016-12-17 16:07:16

解决方案2
0 已采纳 2016-12-18 13:35:43

无法载入JavaScript档案

问题描述

2 个解决方案

解决方案1 0 2016-12-17 16:07:16

解决方案2 0 已采纳 2016-12-18 13:35:43

解决方案1
0 2016-12-17 16:07:16

解决方案2
0 已采纳 2016-12-18 13:35:43