我需要在 thymeleaf 模板上调用一个 javascript 函数，如下所示：
案例一：
<select th:onclick="${'function1('a')'}">
但在这种情况下，百里香不起作用..一些研究前（包括stackoverflow）我得到以下“解决方案”：
案例2：
<select th:onclick="${'function1(''a'')'}">
案例3：
<select th:onclick="${'function1(\'a\')'}">
案例4：
<select th:onclick="${'function1(\''+'a'+'\')'}">
但在所有情况下，我都会收到相同的错误：“...异常评估 SpringEL 表达式...”
我的问题是关于 javascript 调用，我需要在 js 函数中添加一些参数 ${var} 来调用。我该如何解决？
谢谢
【问题讨论】：
如果您在 JS 函数调用中不需要任何动态变量，可以这样做：
th:onclick="'alert(\'a\');'"
这只是对单引号进行了转义，并且不需要 SpringEL（当然，在这种情况下您可以省去 thymeleaf 属性，而只需使用普通的 onclick）。
要在其中插入变量：
th:onclick="'alert(\'' + ${myVar} + '\');'"
使用警报功能让我尝试并证明它有效。希望对您有所帮助。
【讨论】：
您需要调用下面提到的javascript函数。
th:onclick="'javascript:function1(\''+ ${a} +'\');'"
我认为这对你有帮助。
【讨论】：
试试这个。
th:onclick="${'javascript:functionXXX(' + obj.id + ')'}"
【讨论】：
据我所知，你有两种可能：
使用双括号
<body th:onload="showToast([[${toast}]])">
...
</body>
然后JS函数是这样的
function showToast(toast) {
M.toast({html: toast});
}
使用数据属性
<body th:data-toast="${toast}" th:onload="showToast()">
...
</body>
以及相应的JS函数
function showToast() {
var toast = document.querySelectorAll('body')[0].getAttribute('data-toast');
M.toast({html: toast});
}
【讨论】：
html5 的另一种“新”方式，使用数据属性：
th:data-url="@{/yourUrl}" th:onclick="window.location.href=this.getAttribute('data-url')"
【讨论】：
一种方法是使用字符[[' y ']]。
例如，我将显示变量“startDate”的内容，它是一个日期类型，格式为dd/MM/yyyy HH:mm:ss'，以使用“警报”功能显示。
<input type="button" th:onclick="alert([[${#dates.format(processInstance.startDate, 'dd/MM/yyyy HH:mm:ss')}]]);" />
输出是这样的：
22/02/2019 15:43:02
【讨论】：
我是这样做的：
<td><a href="#" th:onclick="@{'deletetag(' + ${tag.id} + ');'}"><i class="nav-icon fas fa-trash"></i></a></td>
还有一个简单的<script></script>里面的deletetag函数
【讨论】：
在JS中发送两个值：
function openGate(IP,Port) {
// Some operations with parameters IP and Port
}
<button id="open" type="button" th:onclick="'openGate(\'' +${gate.gateIp} +'\',\''+${gate.gatePort}+'\')'" class="btn btn-warning">Open the gate</button>
在 thymeleaf onclick 中，我们使用配额作为参数。 所以源页面看起来
<button id="open" type="button" onclick="openGate('192.168.10.10','9938')" class="btn btn-warning">Open gate</button>
【讨论】：
在某些情况下，我们可能更喜欢将表达式直接写入 HTML 文本。当我们的目标是将变量直接写入 javascript 函数时，它会派上用场。
[[...]] 或 [(...)] 之间的表达式在 Thymeleaf 中被视为内联表达式，在它们内部，我们可以使用在 th:text 中也有效的任何类型的表达式。
一个简单的例子，如果你想调用 javascript function1 来提醒'a'变量。
<script>
function function1(a){
alert(a);
}
</script> 然后在thymeleaf中你可以拨打：<button th:onclick="javascript:function1([[${a}]]);">Send</button>
您可以在 12.1 Expression inlining 部分的 Thymeleaf 文档中找到这些信息，或者在 baeldung.com/spring-thymeleaf-css-js 有一篇包含大量有用示例的好文章。
【讨论】：
您好，我遇到了同样的问题，我遇到的问题是函数未定义，因为我的函数在 thymleaf 文件中
我用过<button th:onclick="javascript:function1()">Send</button>
我也使用了上面提到的解决方案，但对我不起作用
所以我将几乎所有的 JavaScript 函数都复制到了一个单独的 JS 文件中，该文件位于 <project_name>/src/main/resources/public/js/main.js
然后在我的 thymleaf 文件中我像这样链接它
<script type="text/javascript" th:src="@{/js/main.js}" src="../static/js/main.js"></script>
我这样调用我的函数：<input type="checkbox" onclick="function1()" th:onclick="|function1()|">Show Password
而且效果很好
【讨论】：