知識庫 / Spring / Spring MVC RSS 訂閱

1. 概述

在本教程中，我們將調用 JavaScript 函數，並在 Thymeleaf 模板中進行操作。

我們將首先設置我們的依賴項。然後，我們將添加我們的 Spring 控制器和 Thymeleaf 模板。最後，我們將展示根據輸入調用 JavaScript 函數的各種方法。

2. 設置

為了在我們的應用程序中使用 Thymeleaf，讓我們將 Thymeleaf Spring 5 依賴添加到我們的 Maven 配置中：

<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring5</artifactId>
    <version>3.1.2.RELEASE</version>
</dependency>

然後，讓我們根據我們的 Student 模型，將其添加到我們的 Spring 控制器中：

@Controller
public class FunctionCallController {

    @RequestMapping(value = "/function-call", method = RequestMethod.GET)
    public String getExampleHTML(Model model) {
        model.addAttribute("totalStudents", StudentUtils.buildStudents().size());
        model.addAttribute("student", StudentUtils.buildStudents().get(0));
        return "functionCall.html";
    }
}

最後，我們將在 src/main/webapp/WEB-INF/views 下的 functionCall.html 模板中添加這兩個 JavaScript 函數：

<script  th:inline="javascript">
    function greetWorld() {
        alert("hello world")
    }

    function salute(name) {
        alert("hello: " + name)
    }
</script>

我們將使用這兩個函數來闡述下一部分中的示例。

如果遇到任何問題，我們始終可以查看如何將 JavaScript 添加到 Thymeleaf。

3. 在 Thymeleaf 中調用 JavaScript 函數

在 Thymeleaf 中，你可以通過 <script> 標籤或通過 JavaScript Interop 機制來調用 JavaScript 函數。

3.1 使用 <script> 標籤

這是最簡單的方法，適用於簡單的 JavaScript 函數調用。

<script type="text/javascript">
  function myJavaScriptFunction() {
    // JavaScript 代碼
    console.log("Hello from JavaScript!");
  }
</script>

<div th:unless="${#t:truthy('myJavaScriptFunction')}">
  <span th:onclick="myJavaScriptFunction()">Click me!</span>
</div>

在這個例子中，myJavaScriptFunction 是一個 JavaScript 函數，它會在點擊 Click me! 鏈接時被調用。 th:unless 確保只有當 myJavaScriptFunction 存在時，才會顯示鏈接。

3.2 使用 JavaScript Interop (Thymeleaf 3.0+)

對於更復雜的場景，例如需要傳遞參數或在 JavaScript 中訪問 Thymeleaf 變量，可以使用 JavaScript Interop。 這需要配置 JavaScript Interop 才能正常工作。 (此處省略詳細配置步驟，請參考 Thymeleaf 官方文檔)

<script type="text/javascript">
  // JavaScript 代碼
  function myJavaScriptFunction(name) {
    console.log("Hello, " + name + " from JavaScript!");
  }
</script>

<div th:unless="${#t:truthy('myJavaScriptFunction')}">
  <span th:onclick="myJavaScriptFunction('Thymeleaf')">Click me!</span>
</div>

在這個例子中，myJavaScriptFunction 接受一個參數 name，並在點擊鏈接時被調用，並將 "Thymeleaf" 作為參數傳遞給 JavaScript 函數。

3.1. 使用無輸入參數的函數

以下是如何調用我們上面定義的 greetWorld 函數：

<button th:onclick="greetWorld()">using no variable</button>

它適用於任何自定義或內置的 JavaScript 函數。

3.2. 使用具有靜態輸入的函數

如果 JavaScript 函數中不需要任何動態變量，則調用方式如下：

<button th:onclick="'alert(\'static variable used here.\');'">using static variable</button>

這段文本無需轉義單引號，也不需要使用 SpringEL。

3.3. 使用帶有動態輸入的函數

以下是四種使用變量調用 JavaScript 函數的方法。

第一種方法是使用內聯變量：

<button th:onclick="'alert(\'There are exactly '  + ${totalStudents} +  ' students\');'">using inline dynamic variable</button>

另一個選項是調用 javascript:function：

<button th:onclick="'javascript:alert(\'There are exactly ' + ${totalStudents} + ' students\');'">using javascript:function</button>

第三種方法是使用數據屬性：

<button th:data-name="${student.name}" th:onclick="salute(this.getAttribute('data-name'))">using data attribute</button>

此方法在調用 JavaScript 事件 時非常有用，例如 onClick 和 onLoad。

最後，我們可以使用雙方括號語法調用我們的 salute 函數：

<button th:onclick="salute([[${student.name}]])">using double brackets</button>

用雙方括號括起來的表達式被認為是Thymeleaf中的內聯表達式。因此，我們可以使用在th:text屬性中也有效的任何類型的表達式。

3.4. 使用 屬性與 Thymeleaf 3

<button th:attr="onclick='salute([[${student.name}]])'">Click to greet student</button>

<script  th:inline="javascript">
    // ....
    let total = [[${totalStudents}]]

    function totalstudent() {
        alert("total students: " + total)
    }
</script>

let total = /*[[${totalStudents}]]*/ '50';

/*<![CDATA[*/

    let total = /*[[${totalStudents}]]*/ 'default value';
    //...

/*]]>*/