Thymeleaf传递给js方法值

Thymeleaf传递给js方法值

Thymeleaf 身为SpringBoot的正宫; 推荐模板竟然不被广大开发者热衷. 这就导致了一些听从Spring建议的程序猿遇到Thymeleaf问题无处可问. 我不幸的也中枪了!!!     可以看官方文档的大佬请无视我这个萌新.

话入正题, 今天在写项目时 发现Thymeleaf给onclick传递值时如此的困难,试了很多次终于成功了!  代码附上

<a  th:onclick="'javascript:del('+${user.id}+');'" ></a>
 <script>
   function  del(id) {
      alert(id);
                      }
 </script>

解释下:  (1) th:onclick 对应的就是 js中的onclick  

             (2)  javascript: del()     前面的javascript: 是不变的   del是你的方法名

             (3) ${user.id}   对应的就是  你要获取的对象的值

             (4) 上面代码的符号不要少打哦 ,不然网页就崩溃了

这种是只传递id值. 但是很多场景还要根据ajax的返回值进行判断删除. 这个时候把方法中的参数加上this就好了. 这个是时候的代码就变成了这样.

<a  th:onclick="'javascript:del('+this+','+${user.id}+');'" ></a>
<script>
   function  del(obj,id) {
      alert(id);
                      }
</script>

这个时候this也就传进来了.  一起学Thymeleaf的小伙伴们快去试试吧 

Thymeleaf常用的判断表达式


gt:great than(大于)>
ge:great equal(大于等于)>=
eq:equal(等于)==
lt:less than(小于)<
le:less equal(小于等于)<=
ne:not equal(不等于)!=

用法: 例 th:if="${xx} lt  'n'"      解释: (当${xx} 小于 'n' 的时候 执行if 的内容)

<div th:if=" ${xx} lt '3'">
  <div class="addList">
    <p>
       <a id="href">
            <span class="icon"></span>添加绑定
        </a>
    </p>
   <p> xx绑定只能小于3</p>
    </div>
</div>

1.thymealf时间格式化

model传值

th:value="${#dates.format(machine.endDate,'yyyy-MM-dd HH:mm:ss')}">
 

  • 21
    点赞
  • 39
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
要将JS中的变量传递Thymeleaf,需要使用AJAX或表单提交。以下是两种方法: 1. AJAX方式 使用AJAX可以异步地将数据发送到服务器,然后从服务器响应中获取结果。在JS中,可以使用XMLHttpRequest对象来实现AJAX请求。例如: ```javascript var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { // 获取服务器响应 var data = xhr.responseText; // 将数据传递Thymeleaf document.getElementById("data").innerHTML = data; } else { console.error(xhr.statusText); } } }; xhr.open("POST", "/your/url", true); xhr.setRequestHeader("Content-Type", "application/json"); xhr.send(JSON.stringify({ "variable": yourVariable })); ``` 在Thymeleaf模板中,可以使用Thymeleaf的表达式语言(EL)来获取传递的参数。例如: ```html <div th:text="${variable}" id="data"></div> ``` 2. 表单提交方式 使用表单提交可以将数据同步地发送到服务器,然后重新加载页面以显示结果。在JS中,可以通过创建一个表单元素并将其添加到DOM中来实现表单提交。例如: ```javascript var form = document.createElement("form"); form.setAttribute("method", "post"); form.setAttribute("action", "/your/url"); var input = document.createElement("input"); input.setAttribute("type", "hidden"); input.setAttribute("name", "variable"); input.setAttribute("value", yourVariable); form.appendChild(input); document.body.appendChild(form); form.submit(); ``` 在Thymeleaf模板中,可以使用Thymeleaf的表达式语言(EL)来获取表单提交的参数。例如: ```html <div th:text="${param.variable}" id="data"></div> ```
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值