無法載入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