无法载入JavaScript档案

Question

I'm using Spring MVC, Thymeleaf and want to import a javascript file in my html document. 我正在使用Spring MVC，Thymeleaf，并想在我的html文档中导入一个javascript文件。 Although all links are set correctly and the files appear in the debugging view in my browser, they don't load. 尽管所有链接均已正确设置，并且文件显示在我的浏览器的调试视图中，但它们不会加载。 There is following JS in the HTML that should call a datepicker, but it doesn't show up: HTML中有以下JS，应该调用日期选择器，但未显示：

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

the files are included this way: 通过以下方式包含文件：

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

CSS files work just fine just with the type changed. CSS文件只要更改了类型就可以正常工作。

Any ideas how to fix this? 任何想法如何解决这一问题？

Shows error on Chrome debugging 在Chrome调试中显示错误

Now I deleted all not necessary js files from the import and it shows following error: 现在，我从导入中删除了所有不必要的js文件，并显示以下错误：

more precise error 更精确的错误

This shows that the jquery-1.12.4 is used. 这表明使用了jquery-1.12.4。

Answer 1

The Answer: 答案：

1) <th:block></th:block> makes no diffrence 1） <th:block></th:block>没有区别

2) The additions to the html tag 2）对html标签的添加

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

make no difference 没有区别

3) placing the script-tags with content at the bottom of the body is the same as when placing it in the head 3）将带有内容的脚本标签放置在正文的底部与将其放在头部的相同

4) I use Bootstrap in this project and used the datepicker inside a div of Bootstrap. 4）我在该项目中使用Bootstrap，并在Bootstrap的div中使用了datepicker。 After placing it somewhere else in the body and not inside a div it worked. 将其放置在体内其他位置而不是在div内后，它起作用了。

Conclusion: If you are using Spring MVC and Thymeleaf and want to include JavaScript files you need: 结论：如果您正在使用Spring MVC和Thymeleaf，并且想要包含JavaScript文件，则需要：

1) <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" > 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"/> 2） <link th:href="@{/resources/.../file.css}" rel="stylesheet" type="text/css"/>

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

4) Make sure your JS or CSS files are not "overwritten" by following files 4）确保以下文件不会“覆盖”您的JS或CSS文件

Thanks for your time and help @Parth! 感谢您的时间和@Parth的帮助！

Answer 2

When you are using Spring and Thymeleaf the following project structure is recommended: 使用Spring和Thymeleaf时，建议使用以下项目结构：

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

Then including different resources in your templates will look like this: 然后，在模板中包含不同的资源将如下所示：

<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