如何在外联js文件中获取到thymeleaf的数据呢

要在外部JavaScript文件中获取Thymeleaf数据，可以使用Thymeleaf的内联脚本和自定义属性。具体步骤如下：

1. 将数据绑定到HTML元素上，例如：

<div id="data" th:data-name="${name}" th:data-age="${age}">

2. 在外部JavaScript文件中使用getElementById()方法获取该元素，例如：

var data = document.getElementById("data");

3. 通过getAttribute()方法获取数据，例如：

var name = data.getAttribute("data-name");
var age = data.getAttribute("data-age");

这样就可以在外部JavaScript文件中获取到Thymeleaf的数据了。

相关问题

在 JavaScript 文件中使用 Thymeleaf 语法

在 JavaScript 文件中使用 Thymeleaf 语法需要借助于服务器端的渲染，通过在服务器端解析模板并将变量的值渲染到模板中，然后将渲染好的 HTML 页面返回给客户端。

具体实现方法有以下几种：

1. 将 JavaScript 文件的内容嵌入到 HTML 页面中，使用 Thymeleaf 语法引用模板中的变量。例如：

<script th:inline="javascript">
    var myVar = /*[[${myVar}]]*/ '';
    // ...
</script>

此方法需要将 JavaScript 内容写在 HTML 页面中，不太灵活。

2. 将 JavaScript 文件的内容存储在模板中，使用 Thymeleaf 语法引用模板中的变量，然后在服务器端将模板渲染为 HTML 页面。例如：

// JS 模板文件
var myVar = /*[[${myVar}]]*/ '';

// 渲染模板并返回 HTML 页面
@GetMapping("/my-page")
public String myPage(Model model) {
    model.addAttribute("myVar", "hello world");
    return "my-page";
}

此方法需要在服务器端进行模板渲染，适用于需要动态生成 HTML 页面的情况。

3. 将 JavaScript 文件的内容存储在独立的文件中，在服务器端使用 Thymeleaf 语法生成动态的 JavaScript 文件。例如：

// JavaScript 文件模板
var myVar = /*[[${myVar}]]*/ '';

// 渲染 JavaScript 文件并返回
@GetMapping("/my-script.js")
public ResponseEntity<String> myScript(Model model) {
    String content = // 读取 JavaScript 文件模板并使用 Thymeleaf 渲染
    HttpHeaders headers = new HttpHeaders();
    headers.setContentType(MediaType.APPLICATION_JAVASCRIPT);
    return new ResponseEntity<>(content, headers, HttpStatus.OK);
}

此方法需要在服务器端生成动态的 JavaScript 文件，适用于需要动态生成 JavaScript 文件的情况。

无论采用哪种方法，在使用 Thymeleaf 语法时都需要确保在服务器端进行模板渲染，而不能直接在客户端访问 JavaScript 文件。

thymeleaf js中获取后端数据

可以使用th:attr来获取后端数据，例如：

<div th:attr="data-id=${id}">这里是获取到的数据</div>

其中，${id}是后端传递过来的数据，可以在js中使用jQuery或者原生js来获取该div的data-id属性值，从而获取到后端数据。