JavaScript文件无法加载

时间:2016-12-17 12:49:08

标签: javascript jquery html spring-mvc thymeleaf

我正在使用Spring MVC,Thymeleaf并希望在我的html文档中导入javascript文件。尽管所有链接都已正确设置,并且文件显示在浏览器的调试视图中,但它们不会加载。 HTML中有以下JS应该调用datepicker,但它没有出现:

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

以这种方式包含文件:

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

CSS文件只需更改类型即可正常工作。

任何想法如何解决这个问题?

Shows error on Chrome debugging

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

more precise error

这表明使用了jquery-1.12.4。

2 个答案:

答案 0 :(得分:0)

答案:

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文件没有被覆盖&#34;通过以下文件

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

答案 1 :(得分:0)

当您使用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>