使用来自 Spring 后端的 JSON 数据使用 Ajax XMLHttpRequest() 填充表
Posted
技术标签:
【中文标题】使用来自 Spring 后端的 JSON 数据使用 Ajax XMLHttpRequest() 填充表【英文标题】：Populate table using Ajax XMLHttpRequest() with JSON data from Spring backend 【发布时间】：2020-12-05 18:06:59 【问题描述】：我正在构建一个 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 吗？
【参考方案1】：
因此，经过更多研究后，我决定采用以下方式（并且可以按需要工作！）：
-
我添加了一个方法“getGuestsDashboard”，它只返回一个视图（网址：/auth/admin/guests）
还保留了 'getAllGuests' 方法来获取数据并返回 JSON，但这在 uri:/auth/admin/guests/getall 下可用，我在我的 ajax 部分中调用它。
【讨论】：
以上是关于使用来自 Spring 后端的 JSON 数据使用 Ajax XMLHttpRequest() 填充表的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Angular + Spring + JSON 自定义登录/身份验证
通过使用 Spring Boot 插入来自循环的所有数据来创建 JSON 数组