<think>我们注意到用户的问题是关于在Thymeleaf模板中使用
jQuery的`
$.each`方法
遍历数据并展示。虽然Thymeleaf本身提供了`th:
each`进行
遍历，但有时我们可能需要在客户端使用JavaScript（特别是
jQuery）来动态处理数据。以下是如何在Thymeleaf中结合使用`
$.each`进行数据
遍历的步骤：
### 1
. 后端准备数据
首先，后端需要将数据作为模型属性
传递给Thymeleaf模板。例如，我们
传递一个用户列表：
```java
@Controller
public class UserController {
@GetMapping("/users")
public String getUsers(Model model) {
List<User> user
List = Arrays
.as
List(
new User(1, "Alice", "123456", "Beijing"),
new User(2, "Bob", "654321", "Shanghai")
);
model
.addAttribute("users", user
List);
return "users";
}
}
```
### 2
. 前端使用Thymeleaf和
jQuery
在Thymeleaf模板中，我们可以使用以下两种方式之一来使用`
$.each`
遍历数据：
#### 方式一：将数据作为JavaScript变量
使用Thymeleaf的内联表达式将服务器端的数据转换为JavaScript变量，然后使用`
$.each`
遍历。
```html
<!DOCTYPE html>
<html xmlns:th="http://www
.thymeleaf
.org">
<head>
<script src="https://code
.jquery.com/
jquery-3
.6
.0
.min
.js"></script>
</head>
<body>
<div id="user-
list"></div>
<script th:inline="javascript">
/*<![CDATA[*/
$(function() {
// 使用Thymeleaf内联获取数据
var users = /*[[
${users}]]*/ [];
// 使用
jQuery的
$.each遍历
$.each(users, function(index, user) {
var userHtml = '<div>' +
'<span>' + user
.id + '</span> ' +
'<span>' + user
.name + '</span> ' +
'<span>' + user
.phone + '</span> ' +
'<span>' + user
.address + '</span>' +
'</div>';
$('#user-
list')
.append(userHtml);
});
});
/*]]>*/
</script>
</body>
</html>
```
#### 方式二：从隐藏域中获取数据
如果数据量较大或者需要避免在JavaScript代码中直接暴露数据结构，可以将数据放入隐藏域，然后使用
jQuery获取并解析。
```html
<body>
<!-- 将数据存储在隐藏域中，使用Thymeleaf的th:attr设置value -->
<input type="hidden" id="users-data" th:value="
${#strings
.escapeJava(#strings
.toString(users))}" />
<div id="user-
list"></div>
<script>
$(function() {
// 从隐藏域获取数据字符串
var usersJson =
$('#users-data')
.val();
// 解析为JSON对象
var users = JSON
.parse(usersJson);
// 使用
$.each遍历
$.each(users, function(index, user) {
$('#user-
list')
.append(
$('<div>')
.append(
$('<span>')
.text(user
.id),
$('<span>')
.text(user
.name),
$('<span>')
.text(user
.phone),
$('<span>')
.text(user
.address)
)
);
});
});
</script>
</body>
```
### 3
. 注意事项
- **数据转义**：在方式一中，Thymeleaf内联表达式会自动处理一些转义，但要注意如果数据中包含特殊字符（如引号），可能会破坏JavaScript结构。方式二通过隐藏域和`escapeJava`可以更好地处理特殊字符。
- **性能考虑**：如果数据量很大，使用`
$.each`
遍历可能会影响页面加载性能，建议使用分页或虚拟滚动。
- **Thymeleaf的表达式**：在JavaScript内联中，使用`/*[[
${data}]]*/`的语法，其中`/*[[
...]]*/`是Thymeleaf的安全内联语法，当模板静态打开时，`/*[[
${data}]]*/`后面的空数组`[]`会作为默认值，而在服务器渲染时会被替换。
### 4
. 示例：
遍历Map
如果数据是Map类型，也可以使用`
$.each`
遍历：
```html
<script th:inline="javascript">
var userMap = /*[[
${userMap}]]*/ {};
$.each(userMap, function(key, value) {
console
.log(key + ": " + value
.name);
});
</script>
```
### 5
. 结合Thymeleaf的服务器端渲染和客户端处理
这种方式适用于需要同时利用Thymeleaf的服务器端渲染能力和客户端的动态交互。例如，初始数据由服务器渲染，后续的更新通过
Ajax加载并用`
$.each`动态添加。
### 总结
在Thymeleaf模板中使用
jQuery的`
$.each`
遍历数据的关键步骤：
1
. 将服务器端的数据通过Thymeleaf内联表达式或隐藏域
传递给JavaScript。
2
. 在页面加载完成后，使用`
$.each`
遍历数据并动态生成DOM元素插入页面。
这种方式结合了服务器端模板引擎和客户端脚本的优势，适用于需要动态操作数据的场景[^1][^2][^5]。
---
### §§相关问题§§
1
. 如何在Thymeleaf中使用
Ajax动态加载数据并利用`
$.each`展示？
2
. Thymeleaf内联表达式处理复杂数据结构（如嵌套对象）时有哪些注意事项？
3
. 如何优化Thymeleaf中大数据量的前端渲染性能？</think>在 Thymeleaf 模板中使用
jQuery 的 `
$.each()` 方法
遍历数据并展示，可以通过以下步骤实现：
### 一、基本实现步骤
#### 1
. 后端准备数据 (Spring Boot)
```java
@Controller
public class UserController {
@GetMapping("/users")
public String getUsers(Model model) {
List<User> user
List = Arrays
.as
List(
new User(1, "Alice", "123456", "Beijing"),
new User(2, "Bob", "654321", "Shanghai")
);
model
.addAttribute("users", user
List); //
传递用户列表到前端
return "user-page";
}
}
```
#### 2
. 前端使用 Thymeleaf +
jQuery 遍历展示
```html
<!DOCTYPE html>
<html xmlns:th="http://www
.thymeleaf
.org">
<head>
<script src="https://code
.jquery.com/
jquery-3
.6
.0
.min
.js"></script>
</head>
<body>
<!-- 使用Thymeleaf将数据注入JavaScript -->
<script th:inline="javascript">
/*<![CDATA[*/
// 将服务器端数据转换为JavaScript变量
const userData = /*[[
${users}]]*/ [];
$(document)
.ready(function() {
// 使用
jQuery的
$.each遍历数据
$.each(userData, function(index, user) {
// 创建并添加DOM元素
$("#user-
list")
.append(`
<div class="user-item">
<span>ID:
${user
.id}</span>
<span>Name:
${user
.name}</span>
<span>Phone:
${user
.phone}</span>
<span>Address:
${user
.address}</span>
</div>
`);
});
});
/*]]>*/
</script>
<!-- 展示区域 -->
<div id="user-
list"></div>
</body>
</html>
```
### 二、关键技术解析
1
. **数据
传递方式**：
- 使用 Thymeleaf 的 `th:inline="javascript"` 将服务器数据注入 JavaScript 变量
- `const userData = /*[[
${users}]]*/ [];` 语法确保：
- 服务器渲染时：注入真实数据
- 静态打开时：使用空数组兜底 [^1]
2
. **
$.each()
遍历方法**：
```javascript
$.each(collection, function(index, item) {
// index: 当前索引
// item: 当前数据项
});
```
3
. **动态创建 DOM 元素**：
- 使用
jQuery 的 `append()` 方法动态添加元素
- 使用模板字符串简化 HTML 拼接
### 三、处理不同数据结构
#### 1
. 遍历数组
```javascript
const colors = ["Red", "Green", "Blue"];
$.each(colors, function(i, color) {
$("#color-
list")
.append(`<li>
${i+1}
. ${color}</li>`);
});
```
#### 2
. 遍历对象列表
```javascript
$.each(userData, function(i, user) {
$("#user-
list")
.append(`
<tr>
<td>
${user
.id}</td>
<td>
${user
.name}</td>
<td>
${user
.phone}</td>
</tr>
`);
});
```
#### 3
. 遍历 Map 对象
```java
// 后端
传递Map数据
Map<String, String> settings = new HashMap<>();
settings
.put("theme", "dark");
settings
.put("language", "zh-CN");
model
.addAttribute("appSettings", settings);
```
```javascript
// 前端
遍历Map
const settings = /*[[
${appSettings}]]*/ {};
$.each(settings, function(key, value) {
$("#settings")
.append(`<div>
${key}:
${value}</div>`);
});
```
### 四、结合 Thymeleaf 特性
1
. **条件渲染**：
```javascript
$.each(userData, function(i, user) {
let vipClass = user
.vip ? "vip-user" : "";
$("#user-
list")
.append(`
<div class="user
${vipClass}">
<!-- 内容 -->
</div>
`);
});
```
2
. **使用 Thymeleaf 表达式**：
```javascript
$.each(userData, function(i, user) {
$("#user-
list")
.append(`
<a th:href="@{/profile(id=
${user
.id})}">
View Profile
</a>
`);
});
```
3
. **处理图片资源**：
```javascript
$.each(products, function(i, product) {
$("#product-grid")
.append(`
<div class="product">
<img th:src="@{/images/} +
${product
.imagePath}"
alt="
${product
.name}">
<h3>
${product
.name}</h3>
</div>
`);
});
```
### 五、性能优化技巧
1
. **文档片段优化**：
```javascript
// 创建文档片段减少重绘次数
const fragment = document
.createDocumentFragment();
$.each(userData, function(i, user) {
const div = document
.createElement('div');
div
.innerHTML = `<span>
${user
.name}</span>`;
fragment
.appendChild(div);
});
$("#user-
list")
.append(fragment);
```
2
. **分页加载**：
```javascript
let currentPage = 1;
const pageSize = 10;
function loadPage(page) {
$.get(`/api/users?page=
${page}&size=
${pageSize}`, function(data) {
$("#user-
list")
.empty();
$.each(data
.content, function(i, user) {
// 渲染用户项
});
});
}
```
3
. **虚拟滚动**：
```javascript
$("#scroll-container")
.scroll(function() {
if (
$(this)
.scrollTop() +
$(this)
.innerHeight() >= this
.scrollHeight) {
loadNextPage();
}
});
```
### 六、常见问题解决
1
. **特殊字符转义**：
```javascript
$.each(comments, function(i, comment) {
const safeText =
$("<div>")
.text(comment
.content)
.html();
$("#comments")
.append(`<div>
${safeText}</div>`);
});
```
2
. **处理空数据**：
```javascript
if (userData
.length === 0) {
$("#user-
list")
.html('<div class="empty">No users found</div>');
} else {
$.each(userData, function(i, user) {
// 渲染数据
});
}
```
3
. **性能监控**：
```javascript
console
.time('renderUsers');
$.each(userData, function(i, user) {
// 渲染代码
});
console
.timeEnd('renderUsers'); // 输出渲染耗时
```
### 七、与 Thymeleaf th:
each 对比
| 特性 | `
$.each()` | `th:
each` |
|------|------------|-----------|
| 执行时机 | 客户端渲染 | 服务器端渲染 |
| 数据依赖 | 需额外注入JS | 直接访问模型属性 |
| SEO友好性 | 较低 | 较高 |
| 动态更新 | 支持
Ajax更新 | 需刷新页面 |
| 初始加载 | 可能闪烁 | 立即显示 |
| 复杂度 | 需JS/CSS知识 | 纯HTML模板 |
这种方案适合需要动态交互的场景，如过滤、排序、分页等操作[^2][^5]。对于静态内容展示，使用 Thymeleaf 的 `th:
each` 更高效[^1][^3]。
---
###
扫一扫
2110
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
