Thymeleaf通过js获取数据

Thymeleaf是一个强大的模板引擎，主要用于Spring MVC项目中。它允许在HTML页面上动态地嵌入表达式来处理数据。如果你想要从JavaScript中获取数据并显示在Thymeleaf页面上，通常会涉及到前后端的交互。

1. **服务器端渲染**：首先，在服务器端（通常是控制器层），你可以使用Thymeleaf的特性，如`th:text`或`th:href`等，将数据绑定到模板变量中。然后，渲染后的HTML发送给客户端，其中包含了预填的数据。

<button th:text="${item.name}">点击获取数据</button>
<script th:inline="javascript">
    document.getElementById('dataButton').addEventListener('click', function() {
        // 使用Ajax或其他前端技术向服务器请求数据
        fetch('/api/data')
            .then(response => response.json())
            .then(data => {
                // 更新页面元素，比如显示数据
                const element = document.getElementById('dataElement');
                element.textContent = data;
            });
    });
</script>

在这个例子中，当按钮被点击时，会发起AJAX请求获取数据，并更新指定的元素内容。

2. **异步模板**：如果你使用的是AngularJS、Vue.js或React等现代框架与Thymeleaf结合，可以利用它们提供的数据绑定功能，同时在Thymeleaf中引用这些库来动态展示数据。在这种模式下，数据是在浏览器端更新的，而不是直接从服务器获取。