thymeleaf 模板解析 th:onclick 事件异常 & 常见的 thymeleaf 往 js 参数传值解决方法

最新推荐文章于 2022-09-01 22:53:39 发布
最新推荐文章于 2022-09-01 22:53:39 发布
阅读量1.1k 收藏 7
点赞数 3
分类专栏： SpringBoot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HeyShHeyou/article/details/102409392
版权

问题描述

thymeleaf 模板解析异常，异常点：th:onclick 事件解析问题。

问题日志

2019-10-08 16:50:25 [http-nio-8080-exec-5] ERROR org.thymeleaf.TemplateEngine - [THYMELEAF][http-nio-8080-exec-5] Exception processing template "images.html": An error happened during template parsing (template: "class path resource [templates/images.html]")
org.thymeleaf.exceptions.TemplateInputException: An error happened during template parsing (template: "class path resource [templates/images.html]")
	at org.thymeleaf.templateparser.markup.AbstractMarkupTemplateParser.parse(AbstractMarkupTemplateParser.java:241)
	at org.thymeleaf.templateparser.markup.AbstractMarkupTemplateParser.parseStandalone(AbstractMarkupTemplateParser.java:100)
	at org.thymeleaf.engine.TemplateManager.parseAndProcess(TemplateManager.java:666)
	at org.thymeleaf.TemplateEngine.process(TemplateEngine.java:1098)
	at org.thymeleaf.TemplateEngine.process(TemplateEngine.java:1072)
	at org.thymeleaf.spring5.view.ThymeleafView.renderFragment(ThymeleafView.java:362)
	at org.thymeleaf.spring5.view.ThymeleafView.render(ThymeleafView.java:189)
	at org.springframework.web.servlet.DispatcherServlet.render(DispatcherServlet.java:1371)
	at org.springframework.web.servlet.DispatcherServlet.processDispatchResult(DispatcherServlet.java:1117)
	at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:1056)
	at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:942)
	at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:1005)
	at org.springframework.web.servlet.FrameworkServlet.doGet(FrameworkServlet.java:897)
	at javax.servlet.http.HttpServlet.service(HttpServlet.java:635)
	at org.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:882)
	at javax.servlet.http.HttpServlet.service(HttpServlet.java:742)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:231)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
	at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:53)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
	at org.apache.catalina.filters.RemoteIpFilter.doFilter(RemoteIpFilter.java:904)
	at org.apache.catalina.filters.RemoteIpFilter.doFilter(RemoteIpFilter.java:961)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
	at com.demo.zhulong.filter.XSSFilter.doFilter(XSSFilter.java:94)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
	at org.springframework.web.filter.RequestContextFilter.doFilterInternal(RequestContextFilter.java:99)
	at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:118)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
	at org.springframework.web.filter.FormContentFilter.doFilterInternal(FormContentFilter.java:92)
	at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:118)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
	at org.springframework.web.filter.HiddenHttpMethodFilter.doFilterInternal(HiddenHttpMethodFilter.java:93)
	at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:118)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
	at org.springframework.web.filter.CharacterEncodingFilter.doFilterInternal(CharacterEncodingFilter.java:200)
	at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:118)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
	at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:202)
	at org.apache.catalina.core.StandardContextValve.__invoke(StandardContextValve.java:96)
	at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:41002)
	at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:526)
	at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:139)
	at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:92)
	at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:74)
	at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:343)
	at org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:408)
	at org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:66)
	at org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:860)
	at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1587)
	at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49)
	at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1149)
	at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:624)
	at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61)
	at java.lang.Thread.run(Thread.java:748)
Caused by: org.attoparser.ParseException: Only variable expressions returning numbers or booleans are allowed in this context, any other datatypes are not trusted in the context of this expression, including Strings or any other object that could be rendered as a text literal. A typical case is HTML attributes for event handlers (e.g. "onload"), in which textual data from variables should better be output to "data-*" attributes and then read from the event handler. (template: "images.html" - line 68, col 52)
	at org.attoparser.MarkupParser.parseDocument(MarkupParser.java:393)
	at org.attoparser.MarkupParser.parse(MarkupParser.java:257)
	at org.thymeleaf.templateparser.markup.AbstractMarkupTemplateParser.parse(AbstractMarkupTemplateParser.java:230)
	... 60 common frames omitted
Caused by: org.thymeleaf.exceptions.TemplateProcessingException: Only variable expressions returning numbers or booleans are allowed in this context, any other datatypes are not trusted in the context of this expression, including Strings or any other object that could be rendered as a text literal. A typical case is HTML attributes for event handlers (e.g. "onload"), in which textual data from variables should better be output to "data-*" attributes and then read from the event handler. (template: "images.html" - line 68, col 52)
	at org.thymeleaf.standard.expression.VariableExpression.executeVariableExpression(VariableExpression.java:181)
	at org.thymeleaf.standard.expression.SimpleExpression.executeSimple(SimpleExpression.java:66)
	at org.thymeleaf.standard.expression.Expression.execute(Expression.java:109)
	at org.thymeleaf.standard.expression.AdditionExpression.executeAddition(AdditionExpression.java:96)
	at org.thymeleaf.standard.expression.ComplexExpression.executeComplex(ComplexExpression.java:62)
	at org.thymeleaf.standard.expression.Expression.execute(Expression.java:112)
	at org.thymeleaf.standard.expression.AdditionExpression.executeAddition(AdditionExpression.java:89)
	at org.thymeleaf.standard.expression.ComplexExpression.executeComplex(ComplexExpression.java:62)
	at org.thymeleaf.standard.expression.Expression.execute(Expression.java:112)
	at org.thymeleaf.standard.expression.Expression.execute(Expression.java:138)
	at org.thymeleaf.standard.processor.StandardDOMEventAttributeTagProcessor.doProcess(StandardDOMEventAttributeTagProcessor.java:214)
	at org.thymeleaf.processor.element.AbstractAttributeTagProcessor.doProcess(AbstractAttributeTagProcessor.java:74)
	at org.thymeleaf.processor.element.AbstractElementTagProcessor.process(AbstractElementTagProcessor.java:95)
	at org.thymeleaf.util.ProcessorConfigurationUtils$ElementTagProcessorWrapper.process(ProcessorConfigurationUtils.java:633)
	at org.thymeleaf.engine.ProcessorTemplateHandler.handleOpenElement(ProcessorTemplateHandler.java:1314)
	at org.thymeleaf.engine.OpenElementTag.beHandled(OpenElementTag.java:205)
	at org.thymeleaf.engine.Model.process(Model.java:282)
	at org.thymeleaf.engine.Model.process(Model.java:290)
	at org.thymeleaf.engine.IteratedGatheringModelProcessable.processIterationModel(IteratedGatheringModelProcessable.java:367)
	at org.thymeleaf.engine.IteratedGatheringModelProcessable.process(IteratedGatheringModelProcessable.java:221)
	at org.thymeleaf.engine.ProcessorTemplateHandler.handleCloseElement(ProcessorTemplateHandler.java:1640)
	at org.thymeleaf.engine.TemplateHandlerAdapterMarkupHandler.handleCloseElementEnd(TemplateHandlerAdapterMarkupHandler.java:388)
	at org.thymeleaf.templateparser.markup.InlinedOutputExpressionMarkupHandler$InlineMarkupAdapterPreProcessorHandler.handleCloseElementEnd(InlinedOutputExpressionMarkupHandler.java:322)
	at org.thymeleaf.standard.inline.OutputExpressionInlinePreProcessorHandler.handleCloseElementEnd(OutputExpressionInlinePreProcessorHandler.java:220)
	at org.thymeleaf.templateparser.markup.InlinedOutputExpressionMarkupHandler.handleCloseElementEnd(InlinedOutputExpressionMarkupHandler.java:164)
	at org.attoparser.HtmlElement.handleCloseElementEnd(HtmlElement.java:169)
	at org.attoparser.HtmlMarkupHandler.handleCloseElementEnd(HtmlMarkupHandler.java:412)
	at org.attoparser.MarkupEventProcessorHandler.handleCloseElementEnd(MarkupEventProcessorHandler.java:473)
	at org.attoparser.ParsingElementMarkupUtil.parseCloseElement(ParsingElementMarkupUtil.java:201)
	at org.attoparser.MarkupParser.parseBuffer(MarkupParser.java:725)
	at org.attoparser.MarkupParser.parseDocument(MarkupParser.java:301)
	... 62 common frames omitted

错误原因

网传几乎所有的解决方法都是以下几种：
1. 嵌套[[]]两层中括号包裹的方式往 js 中传值：

<a class="btn" th:onclick="getName([[${person.name}]]);">test</a>

2. 采用转义拼接字符串方式往 js 中传值：

<a th:onclick="'javascript:del(\''+${data}+'\')'">test</a>

若项目采用的 thymeleaf 版本基于 2.x，如果传输数字或布尔值，以上方式或许有用。

但是对于 3.x 版本的 thymeleaf 完全行不通！！3.x版本的thymeleaf为了防止注入攻击，已经升级了安全机制，不能考虑采用以上方式解决。
（查看 pom 文件中的此项配置：

        <!-- 模板引擎 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

此项若无特殊设置，默认为最新版本。）

根据错误提示，在此上下文中仅允许返回数字或布尔值的变量表达式，在此表达式的上下文中不信任任何其他数据类型，（所以如果传输数字或布尔值，常见的解决方式或许有用），包括字符串或可以呈现为文本文字的任何其他对象。

典型的情况是事件处理程序的HTML属性（例如“ onload”），其中变量中的文本数据最好输出到“ data- *”属性，然后再从事件处理程序中读取。

解决方式

修改前：

<a th:onclick="'javascript:modInfo(\''+${image.uuid}+'\');'"></a>

修改后：

<a th:data-id="${image.uuid}" th:onclick="javascript:modInfo(this.getAttribute('data-id'))">test</a>

即将需要传递的字符串 ${image.uuid} 先以 th:data- * 属性定义，然后在 th:onclick 点击事件中，以 this.getAttribute() 方式获取定义的 data-* 属性传值。

js 代码写在 body 之后：

    <script type="text/javascript" th:inline="javascript">
        function modInfo(obj) {
            alert(obj);
            // ....
        }
    </script>

参考链接

https://my.oschina.net/u/2312080/blog/2878183
https://blog.csdn.net/Lactually/article/details/84306960

心得

根据自己具体的错误问题寻找解决方案，直接搜索知识点获得的结果可能并不适合自己的问题（如版本迭代、API 更新等，此类问题往往容易忽视），反而更加误入歧途浪费时间。

 

偷偷玩两下
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
th:onclick的使用（可传多个参数）
m0_52613676的博客
01-22 6657
代码一看就懂： HTML： <!--一个参数--> <button th:onclick="getNick([[${user.nick}]])">按钮1</button> <!--多参--> <button th:onclick="getNickAndPhone([[${user.nick}]], [[${user.phone}]])">按钮2</button> <!--多参, 且包含三元运算符--> <button
Spring boot + thymeleaf 后端直接给onclick函数赋值的实现代码
08-30
在上面的示例代码中，我们使用 Thymeleaf 的变量表达式来生成 onclick 事件处理函数，例如 `th:onclick="'javascript:check('+${corp.id}+',2)'"`。这个事件处理函数将在点击按钮时被触发，并将 corp.id 和 status ...
thymeleaf onclick传参问题
qq_16607641的博客
05-17 448
先让你们看下正确的写法，亲测有效！！！！： <a th:data-id="${syx.id}" href="javascript:void(0);" onclick="serarchDataById(this,this.getAttribute('data-id'))" th:text="${syx.sickNessname}"></a> 用thymeleaf 这玩意，是挺方便的，但是根据也很坑，因为都是向下兼容，它和倒好，直接给你弄死了。 开始我的写法是这样的： <
使用 th:onclick传递多个参数
weixin_47142014的博客
05-23 1502
th:onclick="'myPreview1(\''+${bookinfo.id}+'\',\''+${bookinfo.bookname}+'\',\''+${bookinfo.author}+'\')'" 参数带有字符串需要单引号引注，单引号需转义 偶尔出现几个红可以忽略
thymeleaf a标签 执行 onclick 事件传参数 的写法
tfish的专栏
01-19 9299
thymeleaf a标签 执行 onclick 事件传参数 的写法： &lt;a href = "javascript:void(0)"                    th:onclick = "|javascript : toDeleteUser( '${ user.id }' )|" &gt;删除&lt;/a&gt; 或者 &lt;a href = "javascript:vo...
thymeleaf使用onclick传递参数
这天有点热的博客
07-30 8056
转自Eve慕 Springboot中使用thymeleaf，在用户列表中希望点击删除按钮就删除当前用户，需要传递当前用户的id。 &lt;table class="table table-bordered table-hover"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;id&lt;...
springbt2.* thymeleaf 模板onclick事件异常问题
心神荡漾
05-07 192
<button class="btn btn-success btn-sm" type="button" th:onclick="'javascript:delTest(\''+${id}+'\')'">测试</button> 上面的如果不起作用可以尝试下面这种方式 <button class="btn btn-success btn-sm" ty...
thymeleaf-spring：用于Spring的Thymeleaf集成模块
02-03
7. **MVC处理器方法的调用**：通过Thymeleaf-Spring，可以使用`th:onclick`、`th:onchange`等属性调用控制器中的方法，实现动态行为。 8. **模板缓存**：Thymeleaf-Spring提供模板缓存机制，提高了性能，尤其在高...
Thymeleaf_v3.0.5_参考手册(中文版).zip
02-14
8. **事件处理**：通过`th:on*`系列指令，如`th:onclick`，可以方便地添加JavaScript事件处理。 9. **Spring集成**：Thymeleaf与Spring框架的集成非常紧密，可以与Spring MVC无缝配合，处理视图解析、模型数据注入...
spring-thymeleaf-form:春天百里香叶形式的例子
05-05
- 可以使用Thymeleaf的`th:attr`或`th:attrappend`来动态设置JavaScript事件监听器，例如`<button th:attr="onclick=@{/doSomething(${param.id})}" type="button">Do Something</button>`。 7. **实际应用** - ...
Thymeleaf常用功能.rar
05-03
- **AJAX支持**：Thymeleaf提供了`th:attr`属性来添加JavaScript事件监听器，如`onclick`，从而实现AJAX通信。 5. **条件和逻辑控制**： - **条件语句**：Thymeleaf支持`th:if`和`th:unless`来控制元素是否渲染，...
正确的Thymeleaf中th:each嵌套th:onclick的方法
BHSZZY的博客
11-16 1735
最近使用Thymeleaf，想实现th:each嵌套th:onclick，把遍历中的对象的值传入onclick方法； 网上找了一堆方法，总是不能用；然后自己又多次尝试，终于找到能用的方法了。 以下方法亲测绝对可用，onclick中可字母可数字。 代码如下： <table style="text-align: center; margin-top: 100px; padding: 10px 30px; background-color: white;"> <tr&g
Thymleaf里面如何使用onclick事件
weixin_42595367的博客
08-16 965
问题描述 今天做一个小项目时遇到了一个问题： 在thymleaf中如何触发js的点击事件？我写了一个js的点击事件，但其中的参数不是固定的，是需要随时点击变化的，在如何传参数的问题上我纠结了很久，也在网上找了很多解决方法，最终找到了一种，经实践可以使用。 这是我的thymleaf需要添加点击事件的地方： <button type="button" class="btn btn-sm btn-...
spring boot day03
m0_70160355的博客
09-01 132
spring boot
Thymeleaf入门（二）
Coder Wang
10-20 836
常用标签介绍： 1.简单好理解的几个标签： 关键字 功能 案例 th:id 替换id &lt;input th:id=" 'xx' + ${user.id}"&gt; th:object 替换对象常用于配合星号表达式 &lt;div th:object="${user}"/&gt; th:value 属性赋值，替换value &lt;input th:value="${us...
thymeleaf标签、事件、数据的用法
qq_36750461的博客
12-18 1901
1.接收list循环显示 <ul class="layui-timeline" th:each="list:${list}"> <li class="layui-timeline-item" > <i class="layui-icon layui-timeline-axis"></i> ...
spring mvc报错template might not exist or might not be accessible...
weixin_47314578的博客
12-04 278
报错如下: org.thymeleaf.templateengine : [thymeleaf][http-nio-8080-exec-3] exception processing template “upload”: error resolving template [upload], template might not exist or might not be accessible by any of the configured template resolvers 检查
[THYMELEAF][http-nio-8080-exec-1] Exception processing template “xxx“ 报错解决方案
qq_45397526的博客
11-08 4090
问题描述 在SpringBoot项目中使用Thymeleaf作为模板引擎时，出现了以下错误： [THYMELEAF][http-nio-8080-exec-1] Exception processing template "<!DOCTYPE html> <!--[if IE 8]> <htm[...] ); }); </script> <!-- END JAVASCRIPTS --> </body> <!-- END BODY
thymeleaf点击onclick事件
我的博客
08-03 1009
th:onclick="'ja...
thymeleaf th:onclick
最新发布
08-23
In this example, the `th:onclick` attribute is used to bind the `myFunction()` JavaScript function to the button's `onclick` event. When the button is clicked, the `myFunction()` function will be ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值