使用 Thymeleaf 调用 Javascript 函数
Posted
技术标签:
【中文标题】使用 Thymeleaf 调用 Javascript 函数【英文标题】：Javascript function call with Thymeleaf 【发布时间】：2014-12-18 23:59:57 【问题描述】：我需要在 thymeleaf 模板上调用一个 javascript 函数，如下所示：
案例一：
<select th:onclick="$'function1('a')'">
但在这种情况下，百里香不起作用..一些研究前（包括***）我得到以下“解决方案”：
案例2：
<select th:onclick="$'function1(''a'')'">
案例3：
<select th:onclick="$'function1(\'a\')'">
案例4：
<select th:onclick="$'function1(\''+'a'+'\')'">
但在所有情况下，我都会收到相同的错误：“...异常评估 SpringEL 表达式...”
我的问题是关于 javascript 调用，我需要在 js 函数中添加一些参数 $var 来调用。我该如何解决？
谢谢
【问题讨论】：
【参考方案1】：如果您在 JS 函数调用中不需要任何动态变量，可以这样做：
th:onclick="'alert(\'a\');'"
这只是对单引号进行了转义，并且不需要 SpringEL（当然，在这种情况下您可以省去 thymeleaf 属性，而只需使用普通的 onclick）。
要在其中插入变量：
th:onclick="'alert(\'' + $myVar + '\');'"
使用警报功能让我尝试并证明它有效。希望对您有所帮助。
【讨论】：
谢谢，这个概念对我有用，我确实使用过：th:attr="onchange='javascript:addAttr(\''+$poi.id+'\', this.value )'"【参考方案2】：您需要调用下面提到的javascript函数。
th:onclick="'javascript:function1(\''+ $a +'\');'"
我认为这对你有帮助。
【讨论】：
如果函数内部有两个值如何发送？【参考方案3】：试试这个。
th:onclick="$'javascript:functionXXX(' + obj.id + ')'"
【讨论】：
【参考方案4】：据我所知，你有两种可能：
使用双括号
<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);
【讨论】：
【参考方案5】：html5 的另一种“新”方式，使用数据属性：
th:data-url="@/yourUrl" th:onclick="window.location.href=this.getAttribute('data-url')"
【讨论】：
【参考方案6】：一种方法是使用字符[[' 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
【讨论】：
【参考方案7】：我是这样做的：
<td><a href="#" th:onclick="@'deletetag(' + $tag.id + ');'"><i class="nav-icon fas fa-trash"></i></a></td>
还有一个简单的<script></script>里面的deletetag函数
【讨论】：
值得点赞【参考方案8】：在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>
【讨论】：
【参考方案9】：在某些情况下，我们可能更喜欢将表达式直接写入 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 有一篇包含大量有用示例的好文章。
【讨论】：
【参考方案10】：您好，我遇到了同样的问题，我遇到的问题是函数未定义，因为我的函数在 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
而且效果很好
【讨论】：
以上是关于使用 Thymeleaf 调用 Javascript 函数的主要内容，如果未能解决你的问题，请参考以下文章
在 Thymeleaf 中使用 onClick 时如何将参数传递给 javascript 函数调用
使用带有 ajax Rest 调用的 Spring CSRF 和带有 Thymeleaf 的 HTML 页面
从 Thymeleaf 调用并加载 Spring MVC 控制器请求方法
是否可以使用 AJAX 调用中的成功对象并将其传递给 thymeleaf 进行迭代