Thymeleaf中的JavaScript函数调用

1. 概述

在这个教程中，我们将学习如何在 Thymeleaf 模板中调用 JavaScript 函数。我们将首先设置依赖项，然后添加 Spring 控制器和 Thymeleaf 模板。最后，我们将展示根据输入调用 JavaScript 函数的方法。

2. 配置

为了在我们的应用中使用 Thymeleaf，我们需要在 Maven 配置中添加 Thymeleaf Spring 5 依赖：

<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 函数

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 上找到。

Persistence

REST

Security