使用 Thymeleaf 的 JavaScript 函數調用

一、概述

在本教程中，我們將在 Thymeleaf 模板中調用JavaScript函數。

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

2. 設置

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

<dependency>
 <groupId>org.thymeleaf</groupId>
 <artifactId>thymeleaf-spring5</artifactId>
 <version>3.0.11.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";
 }
 }

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

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

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

我們將在下面的下一節中使用這兩個函數來說明我們的示例。

如果有任何問題，我們可以隨時檢查如何將 JavaScript 添加到 Thymeleaf。

3. 在 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屬性中也有效的任何類型的表達式。

4。結論

在本教程中，我們學習瞭如何在 Thymeleaf 模板中調用 JavaScript 函數。我們首先設置我們的依賴項。然後，我們構建了控制器和模板。最後，我們探索了在 Thymeleaf 中調用任何 JavaScript 函數的方法。

與往常一樣，代碼可在 GitHub 上獲得。