Thymeleaf 是一种用于 Web 和独立环境的现代服务器端 Java 模板引擎，它具有强大的功能，可以轻松地将 JSON 数据绑定到模板中，本文将介绍如何在 Thymeleaf 中绑定 JSON 数据。
为了在 Thymeleaf 中使用 JSON 数据，我们需要一个 JSON 处理器，常用的 JSON 处理器有 Jackson、Gson 和 org.json，在本文中，我们将使用 Jackson 作为 JSON 处理器，要使用 Jackson，需要将其添加到项目的依赖中。
接下来，我们需要创建一个控制器（Controller）来处理 JSON 数据，在控制器中，我们可以使用 @RestController 注解来定义一个 RESTful 服务，我们可以通过 @RequestMapping 或 @GetMapping 注解来定义请求映射。
@RestController
public class MyController {
@GetMapping("/data")
public MyDataObject getData() {
// 创建 JSON 数据对象
MyDataObject data = new MyDataObject();
data.setName("John Doe");
data.setAge(30);
return data;
}
}
在上面的代码中，我们创建了一个名为 MyController 的控制器，并定义了一个名为 /data 的请求映射，getData() 方法返回一个 MyDataObject 实例，该实例包含 JSON 数据。
接下来，我们需要在 Thymeleaf 模板中绑定 JSON 数据，为此，我们可以使用 Thymeleaf 的内联 JavaScript 表达式。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf 绑定 JSON 数据示例</title>
</head>
<body>
<script th:src="@{/js/jquery.min.js}"></script>
<script>
$(document).ready(function() {
$.get("/data", function(data) {
// 绑定 JSON 数据到模板
$("#name").text(data.name);
$("#age").text(data.age);
});
});
</script>
<h1>个人信息</h1>
<p>姓名：<span id="name"></span></p>
<p>年龄：<span id="age"></span></p>
</body>
</html>
在上面的代码中，我们使用 jQuery 发起一个 GET 请求到 /data 路径，请求成功后，我们将 JSON 数据绑定到模板中的元素上。
常见问题与解答：
Q1: 如何在 Thymeleaf 中使用 JSON 处理器？
A1: 需要在项目依赖中添加 JSON 处理器（如 Jackson、Gson 或 org.json），在控制器中使用相应的处理器来处理 JSON 数据。
Q2: 如何在 Thymeleaf 模板中绑定 JSON 数据？
A2: 可以使用内联 JavaScript 表达式和 jQuery 来发起 AJAX 请求，并将请求返回的 JSON 数据绑定到模板中的元素上。
Q3: 除了 jQuery，还可以使用哪些 JavaScript 库来绑定 JSON 数据？
A3: 除了 jQuery，还可以使用其他 JavaScript 库，如 Axios、Fetch API 或 AngularJS 等来绑定 JSON 数据，只需根据库的文档和用法来修改相应的 JavaScript 代码即可。