如何在Thymeleaf中将服务器传入的Model属性传递至JavaScript

嘿，这个需求很常见！要把后端通过Thymeleaf传入的列表数据悄悄给到JavaScript，不用在页面上显示，我给你分享几个实用的办法：

方法一：Thymeleaf JS内联直接转换（最推荐） #

这是最简单直接的方式，利用Thymeleaf的JavaScript内联功能，直接把后端的Java列表转成JS数组，完全不需要在页面上渲染任何内容：

<script th:inline="javascript">
    // 用Thymeleaf内联语法获取后端数据，[]是默认值防止空数据报错
    const onlineFriends = /*[[${friends_online.friendsOnline}]]*/ [];
    const unreadChats = /*[[${chats.chats}]]*/ [];
    
    // 现在你就可以在JS里随意使用这两个变量了
    console.log("在线好友列表：", onlineFriends);
    console.log("未读消息：", unreadChats);
</script>

关键点说明： #

• 必须给script标签加上th:inline="javascript"，开启Thymeleaf对JS的内联支持
• /*[[${}]]*/是Thymeleaf的JS内联语法，注释包裹的部分会被后端渲染成真实的JSON数组，后面的[]是前端默认值，避免后端返回空时JS出现语法错误
• 确保你的friendsOnlineModel和chatModel里的列表字段（friendsOnline、chats）是可序列化的，Thymeleaf会自动把它们转成JSON格式

方法二：隐藏DOM元素存储数据 #

如果因为某些原因不想用内联语法，可以把数据存在一个隐藏的DOM元素里，再用JS读取解析：

<!-- 用隐藏的div存储JSON格式的数据，不会在页面显示 -->
<div id="onlineFriendsData" th:text="${#lists.toJson(friends_online.friendsOnline)}" style="display: none;"></div>
<div id="unreadChatsData" th:text="${#lists.toJson(chats.chats)}" style="display: none;"></div>

<script>
    // 从隐藏元素读取JSON字符串并转成JS对象
    const onlineFriends = JSON.parse(document.getElementById('onlineFriendsData').textContent);
    const unreadChats = JSON.parse(document.getElementById('unreadChatsData').textContent);
    
    // 后续操作...
</script>

关键点说明： #

• 用Thymeleaf的#lists.toJson()工具方法把Java列表转成JSON字符串，如果你的项目没引入这个工具类，也可以在后端用Jackson的ObjectMapper提前把列表转成JSON字符串再存入Model
• 隐藏元素用style="display: none;"确保不会在页面上显示

方法三：AJAX异步请求接口（适合动态更新） #

如果你的数据需要定时刷新或者不需要在页面加载时就获取，可以让后端提供接口，前端用JS异步请求：

后端接口示例（Java/Spring Boot）： #

@GetMapping("/api/online-friends")
@ResponseBody
public List<Friend> getOnlineFriends(Principal principal) {
    User currentUser = // 从Principal获取当前登录用户
    List<Friend> onlineFriends = defaultFriendRequestService.getFriendsOnline(currentUser);
    return onlineFriends == null ? Collections.emptyList() : onlineFriends;
}

@GetMapping("/api/unread-chats")
@ResponseBody
public List<Chat> getUnreadChats() {
    List<Chat> unreadChats = defaultChatService.getUnreadChats();
    return unreadChats == null ? Collections.emptyList() : unreadChats;
}

前端JS请求示例： #

// 用fetch获取在线好友列表
fetch('/api/online-friends')
    .then(response => response.json())
    .then(onlineFriends => {
        console.log("在线好友：", onlineFriends);
        // 处理数据逻辑
    })
    .catch(error => console.error("获取数据失败：", error));

// 获取未读消息
fetch('/api/unread-chats')
    .then(response => response.json())
    .then(unreadChats => {
        console.log("未读消息：", unreadChats);
        // 处理数据逻辑
    })
    .catch(error => console.error("获取数据失败：", error));

关键点说明： #

• 这种方法完全脱离Thymeleaf的页面渲染，适合需要动态更新数据的场景（比如每隔30秒刷新一次在线好友）
• 需要注意接口的权限控制，确保只有登录用户能访问

内容的提问来源于stack exchange，提问作者appzone_oto