Javascript 显示fetch（）返回的html_Javascript_Html_Xmlhttprequest_Fetch Api

Javascript 显示fetch（）返回的html

javascript html

Javascript 显示fetch（）返回的html,javascript,html,xmlhttprequest,fetch-api,Javascript,Html,Xmlhttprequest,Fetch Api,我正在使用web应用程序向API提交一些表单数据。程序如下：以html格式输入数据当用户按下按钮时，我使用javascript收集表单数据并从中创建JSON字符串我使用fetch（）将JSON发布到API端点 API服务器返回重定向到新页面（完整html文档）我想要实现的是，当fetch请求完成时，用户将被重定向到从API服务器接收的页面。我试图搜索这个，但是我找不到任何东西，因为大多数示例都是用于将响应存储在变量中并对其进行处理的这需要用香草Javascript来完成，因为它是一个嵌

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

以html格式输入数据

当用户按下按钮时，我使用javascript收集表单数据并从中创建JSON字符串

我使用fetch（）将JSON发布到API端点

API服务器返回重定向到新页面（完整html文档）

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

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

这可能对您有用

<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>


网站
document.addEventListener（“DOMContentLoaded”，async（）=>{
const res=wait fetch（'/index2.html'）；
常量文本=等待结果文本（）；
document.open（）；
文件。书写（文本）；
document.close（）；
});

Alexander的答案是可行的，但是Nikola已经说过，清除当前html并替换它并不是一个好的做法。

最后，我选择了一种不同的方法。我从原始表单收集了所有数据，用它创建了一个json字符串，然后动态创建了另一个表单，其中只有一个字段，我将json字符串的值赋给了该字段，然后提交了这个新表单。通过这种方式，我可以在服务器端进行最小修改的同时实现元素的重定向行为。

您有办法更改响应吗？这真是一个糟糕的做法。您需要从当前页面中删除所有html，然后将其替换为响应中的html。在这种情况下，最好不要使用fetch api ajax请求，而只是使用简单的url重定向。我可以修改api响应，因为我也在构建它，但我希望保持原样。我试图实现的基本上是默认的表单提交行为，我只需要为POST请求添加一个自定义主体（JSON而不是表单数据）。可以用javascript将URI重定向到POST请求（带有自定义主体）吗？到目前为止，我发现执行post重定向的唯一方法是提交一个虚拟表单，并在表单中指定url作为操作参数。但是，这不允许您设置自定义主体。您试图实现的并不是AJAX的用途。我建议你要么坚持定期提交表格，要么改变回复。