使用来自 Spring 后端的 JSON 数据使用 Ajax XMLHttpRequest() 填充表答案

【问题标题】：Populate table using Ajax XMLHttpRequest() with JSON data from Spring backend使用来自 Spring 后端的 JSON 数据使用 Ajax XMLHttpRequest() 填充表
【发布时间】：2026-02-08 19:00:01
【问题描述】：

我正在构建一个 Spring Boot 项目，我一直在使用 Thymeleaf 来呈现我的视图。对于我想要更花哨的数据集之一，而不是在 GET 方法中返回 Thymeleaf 模板和数据（使用 model.addAtribute() 等），我想使用 ResponseEntity 以 JSON 格式返回数据集并传递它使用 Ajax XMLHttpRequest() 对象将数据设置到我的视图。

不幸的是，当我输入所需的端点时，视图没有呈现，而是我在屏幕上显示了 JSON 数据 - 我有点理解为什么会发生这种情况，但想知道在这种情况下如何呈现视图.因此，这是我最诚挚的请求：您能否给我一个提示，我应该如何处理 + 如果看起来没问题，请用 ajax 查看我的 js 文件。

所以也许首先让我们看看我如何使用 Thymeleaf 做到这一点（而且效果很好，因为视图呈现）：

    @GetMapping("/auth/admin/guests")
    public String getGuestsDashboard(Model model) {
        model.addAttribute("guests", guestService.getAllGuestsWithoutDetails());
        return "admin/manageguests";
    }

我不想用Thymeleaf，所以我目前的方式如下：

Spring 控制器以 JSON 格式返回数据

    @GetMapping("/auth/admin/guests")
    public ResponseEntity<String> getAllGuests2() throws JsonProcessingException {
        List<GetGuestsDto> guests = guestService.getAllGuestsWithoutDetails();
        LOG.info("Guest list: {}: ", guests.toString());
        if(!guests.isEmpty()) {
            return ResponseEntity.status(HttpStatus.OK).body(toJson(guests));
        } else {
            return ResponseEntity.status(HttpStatus.NO_CONTENT).build();
        }
    }

    private String toJson(Object object) throws JsonProcessingException
    {
        return new ObjectMapper().writeValueAsString(object);
    }

带有从 Spring 后端获取数据的函数的 JavaScript 脚本 (guest-admin.js)* 能否请您看一下 JS 模板文字（反引号）。

let GuestAdminUtils = {

    getAllGuestsWithoutDetails : function() {

        let xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://localhost:8081/auth/admin/guests', true);

        xhr.onload = function() {
            if(this.status === 200) {
                let guests = JSON.parse(this.responseText);
                console.log(guests)
                let output = '';
                for(let i in guests) {
                    output +=
                        `<tr>
                            <td>${guests[i].id}</td>
                            <td>${guests[i].lastName}</td>
                            <td>${guests[i].firstName}</td>
                            <td>${guests[i].emailAddress}</td>
                            <td>${guests[i].active}</td>
                         </tr>`;
                }
                document.getElementById('guestTableBody');
            }
        }
        xhr.send();
    }
}
GuestAdminUtils.getAllGuestsWithoutDetails();

要填充表格的 html 视图 (manageguests.html) 的一部分 我已在视图底部附加了脚本。

<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="fragments/dashboardhead"></head>

<body>
             <div class="table-responsive">
                <table id="guestTable" class="table table-striped table-sm">
                    <thead>
                    <tr>
                        <th>Id</th>
                        <th>LastName</th>
                        <th>FirstName</th>
                        <th>Email</th>
                        <th>Status</th>
                        <th>Delete</th>
                        <th>Deactivate account</th>
                    </tr>
                    </thead>
                    <tbody id="guestTableBody">

                    </tbody>
                </table>
            </div>


<script src="/static/scripts/guest-admin.js"></script>
<footer th:replace="fragments/footer"></footer>
</body>
</html>

因此，当我输入 URL http://localhost:8081/auth/admin/guests 时，我只会在 Web 浏览器中显示 JSON 数据，而不是包含表格等的整个视图。

想知道我的想法是否正确。

更新#1：

作为对问题的回答 - 这是我得到的 json 数据。所以基本上，我输入端点/auth/admin/guests，这会显示在浏览器中——不是在控制台中，而是在正文中。我还在 js 文件中（在 if 语句中）添加了console.log(guests)，但控制台中没有显示任何内容，所以我的数据似乎没有到达脚本，也许......

[{"id":1,"lastName":"Brown","firstName":"Andrew","emailAddress":"andrew.brown@yahoo.com","active":true},{"id":2,"lastName":"Smith","firstName":"Michael","emailAddress":"michael.smith@gmail.com","active":true}]

【问题讨论】：

您忘记将在 ajax 中创建的响应添加到您的表中，即：document.getElementById('guestTableBody').innerHTML = output
@Swati 不幸的是，尽管已经纠正了该错误，但我仍然只在网络浏览器中显示 JSON。
guests 里面有什么？您能否在您的问题中也添加这一点。另外，only JSON displayed in the web browser 是什么意思？
@Swati guest（来自 Spring 控制器）包含来自数据库的数据。只有在浏览器中显示的 JSON 意味着我获得了浏览器正文中显示的 JSON 格式的数据，而不是实际视图（带有表格、导航栏、标题等）。另请查看我的问题的更新，
鉴于您的 REST 端点位于 /auth/admin/guests，您不应该期望在获取该 URL 时只看到 JSON 吗？

标签： javascript java ajax spring-boot spring-mvc

【解决方案1】：

因此，经过更多研究后，我决定采用以下方式（并且可以按需要工作！）：

我添加了一个方法“getGuestsDashboard”，它只返回一个视图（网址：/auth/admin/guests）
还保留了 'getAllGuests' 方法来获取数据并返回 JSON，但这在 uri:/auth/admin/guests/getall 下可用，我在我的 ajax 部分中调用它。

【讨论】：