将js中的变量传递给thymeleaf

要将JS中的变量传递给Thymeleaf，需要使用AJAX或表单提交。以下是两种方法：

1. AJAX方式

使用AJAX可以异步地将数据发送到服务器，然后从服务器响应中获取结果。在JS中，可以使用XMLHttpRequest对象来实现AJAX请求。例如：

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）来获取传递的参数。例如：

<div th:text="${variable}" id="data"></div>

2. 表单提交方式

使用表单提交可以将数据同步地发送到服务器，然后重新加载页面以显示结果。在JS中，可以通过创建一个表单元素并将其添加到DOM中来实现表单提交。例如：

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）来获取表单提交的参数。例如：

<div th:text="${param.variable}" id="data"></div>