Thymeleaf 给 onclick 赋值：语法、多值、多参数及字符串处理

本文介绍了 Thymeleaf 给 onclick 赋值的语法，包括如何传递多个值、多个参数以及如何处理字符串，并解释了常见报错原因及解决方法。

1. Thymeleaf 给 onclick 赋值的语法

Thymeleaf 给 onclick 赋值的语法如下：

<button th:onclick='javascript:myFunction('${variableName}');'>Click me</button>

其中，${variableName} 是 Thymeleaf 中的变量名，可以替换为具体的变量值。myFunction 是 JavaScript 函数的名称。在 onclick 中，我们使用单引号将整个 JavaScript 代码包含起来，并使用双引号将变量值括起来。

2. 给 onclick 赋值多个值

如果要给一个元素赋多个 onclick 值，可以使用 Thymeleaf 的 th:attr 指令。例如：

<button th:attr="onclick='alert('Hello');'   onclick='alert('World');'">Click me</button>

这样就可以给按钮元素赋两个 onclick 值，点击按钮时会依次执行两个 JavaScript 函数。

3. 给 onclick 赋值多个参数

如果要给一个 onclick 赋多个参数，可以使用逗号将参数分隔开。例如：

<button th:onclick='javascript:myFunction('${param1}','${param2}');'>Click me</button>

其中，${param1} 和 ${param2} 是 Thymeleaf 中的变量名，可以替换为具体的变量值。在 onclick 中，我们使用单引号将整个 JavaScript 代码包含起来，并使用加号将变量值拼接在一起。myFunction 是 JavaScript 函数的名称，其中包含两个参数。点击按钮时，会将 ${param1} 和 ${param2} 作为参数传递给 JavaScript 函数。

4. 报错：'Only variable expressions returning numbers or booleans are allowed in this context...'

这个报错意味着在 Thymeleaf 表达式中，只有返回数字或布尔值的变量表达式是被信任的，其他类型的数据，如字符串或其他可以被渲染为文本字面值的对象，都不被信任。这通常是因为在表达式中使用了不被信任的数据类型，需要检查表达式中使用的变量类型是否正确。

5. 在 Thymeleaf 表达式中使用字符串

如果要在 Thymeleaf 表达式中使用字符串，可以使用单引号将字符串括起来，例如：

<p th:text='Hello, ' + ${name} + '!'> </p>

其中，${name} 是 Thymeleaf 中的变量名，可以替换为具体的变量值。在表达式中，使用加号将字符串和变量拼接在一起。这样就可以在 Thymeleaf 中使用字符串了。