jQuery 使用 Thymeleaf 调用 Javascript 函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26526037/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript function call with Thymeleaf
提问by f4root
I need to call a javascript function on thymeleaf template, something like this:
我需要在 thymeleaf 模板上调用一个 javascript 函数，如下所示：
Case 1:
情况1：
<select th:onclick="${'function1('a')'}">
But in this case the thymeleaf not work.. some researchs ago (including stackoverflow) I get the followings "solutions":
但在这种情况下，百里香叶不起作用......之前的一些研究（包括stackoverflow）我得到以下“解决方案”：
Case 2:
案例2：
<select th:onclick="${'function1(''a'')'}">
Case 3:
案例3：
<select th:onclick="${'function1(\'a\')'}">
Case 4:
案例4：
<select th:onclick="${'function1(\''+'a'+'\')'}">
But in all cases I get the same error: "...Exception evaluating SpringEL expression..."
但在所有情况下，我都会遇到相同的错误：“......评估 SpringEL 表达式的异常......”
My problem is about javascript callings, I need put some parameters ${var} for call in js function. How I can fix that ?
我的问题是关于 javascript 调用，我需要在 js 函数中放置一些参数 ${var} 用于调用。我该如何解决？
Thanks
谢谢
回答by Tom Bunting
If you don't need any dynamic vars in the JS function call, this is how to do it:
如果在 JS 函数调用中不需要任何动态变量，可以这样做：
th:onclick="'alert(\'a\');'"
This simply escapes the single quotes and requires no SpringEL (of course you could dispense with the thymeleaf attribute in this case and just use plain onclick).
这只是转义单引号，不需要 SpringEL（当然，在这种情况下，您可以省去 thymeleaf 属性，只需使用普通的 onclick）。
To insert vars into it:
将变量插入其中：
th:onclick="'alert(\'' + ${myVar} + '\');'"
Used the alert function to allow me to try it out and prove it works. Hope that helps.
使用警报功能让我尝试一下并证明它有效。希望有帮助。
回答by Newbie
You need to call the javascript function as mentioned below.
您需要调用下面提到的 javascript 函数。
th:onclick="'javascript:function1(\''+ ${a} +'\');'"
I think this could help you.
我想这可以帮助你。
回答by Tinily
Try this.
尝试这个。
th:onclick="${'javascript:functionXXX(' + obj.id + ')'}"
回答by rjcdz04
One way is use the characters [[' y ']].
一种方法是使用字符[[' y ']]。
For example I am going to show the content of the variable 'startDate' which is a Date type and formatting in the format dd/MM/yyyy HH:mm:ss'to show using 'alert' function.
例如，我将显示变量 'startDate' 的内容，它是一个日期类型，并dd/MM/yyyy HH:mm:ss'以使用 'alert' 函数显示的格式进行格式化。
<input type="button" th:onclick="alert([[${#dates.format(processInstance.startDate, 'dd/MM/yyyy HH:mm:ss')}]]);" />
The output is like this:
输出是这样的：
22/02/2019 15:43:02
回答by Jozef
As far as I know, you have two possibilities how to do it:
据我所知，您有两种可能的方法：
Using double brackets
<body th:onload="showToast([[${toast}]])"> ... </body>
使用双括号
<body th:onload="showToast([[${toast}]])"> ... </body>
And then JS function like this
然后JS函数是这样的
function showToast(toast) {
M.toast({html: toast});
}
Using data- attribute
<body th:data-toast="${toast}" th:onload="showToast()"> ... </body>
使用数据属性
<body th:data-toast="${toast}" th:onload="showToast()"> ... </body>
And appropriate JS function
以及合适的JS函数
function showToast() {
var toast = document.querySelectorAll('body')[0].getAttribute('data-toast');
M.toast({html: toast});
}
回答by Jorge.V
Another "new" way with html5, using data attributes:
html5 的另一种“新”方式，使用数据属性：
th:data-url="@{/yourUrl}" th:onclick="window.location.href=this.getAttribute('data-url')"
回答by ToT McKid
Sending two values in JS:
在 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>
In thymeleaf onclick we are using quotas for parameters. So the sourse page looks
在 thymeleaf onclick 中，我们对参数使用配额。所以源页面看起来
<button id="open" type="button" onclick="openGate('192.168.10.10','9938')" class="btn btn-warning">Open gate</button>
