Thymeleaf 给 onclick 赋值：语法详解及常见问题解决

基本语法

Thymeleaf 给 onclick 赋值的语法如下：

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

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

赋多个值

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

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

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

给一个 onclick 赋值多个参数

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

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

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

常见报错：`Only variable expressions returning numbers or booleans are allowed in this context`

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

如何在 Thymeleaf 表达式中使用字符串？

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

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

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

实例：解决类型不匹配问题

<button id="modal-open-btn-1" data-modal-open="modal-1" th:onclick="'select_city('${addresss.getProvience()}','${addresss.getCity()}','${addresss.getAddressLine()}','${addresss.getPhone()}','${#bools.toString(addresss.getIsDefault())}')'" class="btn btn-primary">修改地址</button>

这段代码中可能出现类型不匹配的问题，例如 addresss.getIsDefault() 返回的是一个布尔值，但是在 Thymeleaf 表达式中需要将其转换为字符串。可以使用 Thymeleaf 的内置工具类进行类型转换，例如：

${#bools.toString(addresss.getIsDefault())}：使用 Thymeleaf 的内置工具类 #bools.toString() 将布尔值转换为字符串。

通过使用内置工具类，可以避免类型不匹配的问题。

希望这篇文章能帮助你更好地理解 Thymeleaf 给 onclick 赋值的用法。如果你还有其他问题，欢迎在评论区留言。

Thymeleaf 给 onclick 赋值：语法详解及常见问题解决