使用 JavaScript 从 Java 操作 API 响应的最佳实践是什么？答案

【问题标题】：What's the best practice for manipulating API response from Java using JavaScript?使用 JavaScript 从 Java 操作 API 响应的最佳实践是什么？
【发布时间】：2022-01-21 03:01:09
【问题描述】：

我在后端使用 Java Spring Boot，在前端使用 Thymeleaf。我正在使用 API 来检索和显示数千张图像。我得到的响应是一个 JSON 对象，其中包含数千个子对象，每个子对象都有一个指向图像的链接。

我想将这个大的 JSON 对象发送到前端。我正在尝试制作图像滑块。当我单击“>”按钮时，会出现下一个图像。 '

这就是我向前端发送 API 响应的方式。 'model' 是 ModelMap 的一个实例。

model.put("apiResponse", apiResponse);

apiResponse 对象现在可以从前端 HTML 文件访问。但是，我不确定如何使用 JavaScript 来操作它。是不是所有的Java对象都不能直接用JavaScript来处理？

在这种情况下，使用某种库将 Java 对象转换为 JSON 是最佳实践吗？我想知道我是否应该这样做，因为这听起来有点奇怪：

最初，API 发送一个 JSON 对象。
Java 使用 List 将其转换为 Java 模型。
然后 Java 服务器将其发送到前端。
要使用 JavaScript 进行操作，请使用 JS 库将其转换回 JSON。

原始数据是 JSON 是不是很奇怪，但我必须经过这么多步骤才能将其恢复为 JSON？事情真的是这样运作的吗？如果没有，有什么更好的做事方式？

【问题讨论】：

Spring Boot 以 JSON 格式发送数据。在客户端（Javascript 代码）中，您不应该看到任何与 Java 相关的内容。它将只是 JSON 文本。

标签： javascript java json spring spring-boot

【解决方案1】：

我通过使用 Thymeleaf 脚本内联解决了这个问题，正如其 official documentation 所建议的那样。

<script th:inline="javascript">
/*<![CDATA[*/
    var apiResponse = /*[[${apiResponse}]]*/ 'apiResponse';
/*]]>*/
</script>

之后，我也可以访问外部 js 文件中的 apiResponse 变量了。

【讨论】：