Thymeleaf使用script传参

项目背景：SpringBoot Thymeleaf

在web界面中想要实现一个如图的删除功能，在用script标签向HTML页面中嵌入一个删除的的脚本时，换了多种方法(下图为例)都无法传参，报错500

1.  
   <!--<button type="button" th:onclick="|javascript:deleteUser('${idcard.pe_no}')|" onclick="delUser(pe_no)" >删除</button>&ndash;&gt; -->
2.  
   <!--<a href="javascript:;" th:onclick="deleteUser(${idcard.pe_no})">删除</a> -->

通过如下代码实现

1.需要在<script>标签上显示开启：<script th:inline="javascript"> </script>

2.双中括号 [[ ]] 输出所需文本，结果会使用引号将其括起来并且对其文本内容中进行JS转义

1.  
2.  
   <td>
3.  
   <button type="button" class="btn btn-danger btn-sm"
4.  
   th:onclick="deleteUser([[${idcard.pe_no}]])" >删除</button>
5.  
   </td>
6.  
   <script th:inline="javascript">
7.  
   function deleteUser(pe_no){
8.  
   if(confirm("您确定要删除吗?")){
9.  
   alert("删除成功！");
10.  
    window.location.href = "/idcard/delete?pe_no=" pe_no;
11.  
    }else {
12.  
    alert("删除失败");
13.  
    window.location.reload();
14.  
    }
15.  
    }
16.  
    </script>
17.  
     
18.  
     
19.  

未解决问题：IDEA中双中括号[[]]显示红色波浪线，但程序可以正常执行

参考：thymeleaf在js中取后台放在model中值的各种方式及区别 - 待那枫叶红成海 - 博客园 (cnblogs.com)

这篇好文章是转载于：学新通技术网