显示 fetch() 返回的 html答案

【问题标题】：Display the html returned by fetch()显示 fetch() 返回的 html
【发布时间】：2021-01-12 02:58:42
【问题描述】：

我正在使用网络应用程序向 API 提交一些表单数据。流程如下：

以 html 形式输入数据
当用户按下按钮时，我使用 javascript 收集表单数据并从中创建 JSON 字符串
使用 fetch() 我将该 JSON 发布到 API 端点
API 服务器返回重定向到新页面（完整的 html 文档）

我想要实现的是，当获取请求完成时，用户将被重定向到从 API 服务器接收到的页面。我尝试搜索此内容，但找不到任何内容，因为大多数示例都是将响应存储在变量中并对其进行处理。

这需要在 vanilla Javascript 中完成，因为它是一个嵌入式系统，我希望使用尽可能少的依赖项。

【问题讨论】：

你有办法改变响应吗？这确实是一个不好的做法。您需要从当前页面中删除所有 html，然后将其替换为响应中的那个。在这种情况下，一般情况下最好不要使用 fetch api ajax 请求，而只需使用简单的 url 重定向。
我可以修改 API 响应，因为我也在构建它，但我更愿意保持原样。我想要实现的基本上是默认的表单提交行为，我只需要为 POST 请求（JSON 而不是表单数据）放入一个自定义正文。是否可以在 javascript 中将 URI 重定向到 POST 请求（带有自定义正文）？到目前为止，我发现进行帖子重定向的唯一方法是提交一个虚拟表单并将 url 指定为表单中的操作参数。但是，这不允许您设置自定义正文。
您想要实现的不是 AJAX 的用途。我建议您要么坚持常规提交表单，要么更改回复。

标签： javascript html xmlhttprequest fetch-api

【解决方案1】：

也许这对你有用。

<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>site</h1>
    <script>
      document.addEventListener("DOMContentLoaded", async () => {
        const res = await fetch('/index2.html');
        const text = await res.text();
        document.open();
        document.write(text);
        document.close();
     });
    </script>
  </body>
</html>

【讨论】：

【解决方案2】：

Alexander 的回答有效，但是正如 Nikola 已经说过的那样，清除当前的 html 并替换它并不是真正的好习惯。最后我选择了不同的方法。我从原始表单中收集了所有数据，从中创建了一个 json 字符串，然后动态地创建了另一个表单，其中只有一个字段，我为其分配了 json 字符串的值，然后提交了这个新表单。这样我就可以实现元素的重定向行为，同时在服务器端进行最少的修改。

【讨论】：