使用 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 上獲得。