【解决】th:onclick给js传string类型的值的问题

最近一个月在做Springboot的项目,在编码过程中遇到了一个问题:在使用Thymeleaf模板时使用了th:onclick属性来调用JavaScript方法,其中涉及到传入后台发送的数据的功能,以便shu数据回显。然而我遇到了一个问题:

当传入参数为数字的时候,可以正常传值,但是涉及到字符串的时候总是运行不通。

去百度查出了好多网友的博客,解决问题也都是五花八门,都不能解决我的问题。

需要涉及到转义的问题,稍不留神就会掉进入坑里。

解决方法1

在JavaScript中调用onclick和th:onclick是不同的。比如在js里面可以这样写:

<a href="javascript:;" onclick="member_edit(\''+c.residentName+'\')"></a>

在th:onclick里面最让人头疼的就是双引号、单引号交叉使用了,若像这样使用,则浏览器会把后台传来的值看作一个js变量名,从而出错。

th:onclick="'javascript:member_edit('+${book.getBookName()}+')'"

但是你如果看网上一些大佬的博客,是这样子的:

th:onclick="'javascript:member_edit(\''+${book.getBookName()}+'\')'">

最后发现上述写法是正确的,因为我传的参数较多,中间拼接单引号时出错。

总结:当传参数时,数字变量直接拼接,而字符串变量需要用

'\''

包裹,表示一个单引号'。

PS:附自己写的源码,仅供参考(多参数调用js函数)

<a title="Edit" href="javascript:;"
                           th:onclick="'javascript:member_edit('+${book.getBookId()}+','+'\''+${book.getBookPosition()}+'\''+','+${book.getBookPrice()}+','+'\''+${book.getBookName()}+'\''+','+'\''+${book.getBookAuthor()}+'\''+','+'\''+${book.getBookIsbn()}+'\''+')'"
                           class="btn btn-xs btn-info"> <i class="icon-edit bigger-120"></i>
                        </a>

解决方法2

还有一种方法,如评论区[weixin_42261874]所说:使用

[[]]

符号包裹,这样能够在js中获取到后台传输到前端的model变量,比如

[[${answer}]]

,在theamleaf表达式中,也可以使用,如

th:onclick="function([[${param}]])"

。(未测试,仅供参考)

 

PS:最后感慨一下,这个问题纠结了我很久,尝试了各种方法不得其解,后来,室友来看我抓耳挠腮,一脸愁容,就问我怎么了,明白详情之后……我俩一讨论不到十分钟解决了。教训:遇到问题实在解决不了的时候,可以求助一下其他人,可能其他人只是站在你身边,什么都不说,你都可以瞬间打破困境,眼前豁然开朗……

相关推荐
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页