thymeleaf 传递数据到js变量

要将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> ```