POST 请求 Fetch API 防止重定向

Posted 2023-02-27

【中文标题】POST 请求 Fetch API 防止重定向

【英文标题】：POST request Fetch API prevent redirect

【发布时间】：2018-09-14 18:12:27

【问题描述】：

所以我想制作一个纯 html 和 javascript 表单并将其提交到服务器。

这是我的html表单代码：

<form id="email-signup" action="http://www.server.com" method="post">
    <input id="firstname-input" type="hidden" name="firstname" value="">
    <input type="text" name="email" placeholder="Input Email">
    <input type="hidden" name="campaign[id]" value="1">
    <input type="hidden" name="campaign[name]" value="Text Campaign">
    <input type="submit" value="Submit">
</form>

这是我的 javascript 代码：

var element = document.getElementById("email-signup");
element.addEventListener("submit", function(event) 
  event.preventDefault()
  fetch("http://www.endpoint.api", 
    method: "POST",
    body: new FormData(document.getElementById('email-signup'))
  )
)
  .then(() => 
  alert('Selamat email anda sudah terdaftar!')
)

问题是，每当我向该表单提交电子邮件时，它都会将我重定向到一个新页面，并回复成功。我想防止这种情况发生，而是会弹出一个警报，告诉我电子邮件提交成功。

【问题讨论】：

开发者工具控制台中的任何内容表明 javascript 甚至可能没有运行？比如，一个错误或某事？

http://www.server.com 是否有可能在发布时导致重定向的服务器端代码？如果有服务器端代码，请在此处发布。

@NightOwl888 http://ae683b14f332321a8t16b02dba7d519b-2052846694.ap-southeast-1.elb.amazonaws.com/ 实际上这是 api。也许这是导致重定向的原因？

@JaromandaX 开发者工具控制台没有错误。它放在该表单上的电子邮件已成功存储在服务器中。但是当我成功提交电子邮件时它仍然重定向我。我认为我从 FormData 发布电子邮件的方式很好嗯

考虑到 addEventListener 不会返回带有 .then 方法的对象，我非常怀疑您在开发人员工具控制台中没有错误 - 也许您不知道自己在做什么正在寻找...在event.preventDefault(); 之后添加console.log("in handler"); - 如果控制台中没有出现，那么很明显您的处理程序没有被调用

【参考方案1】：

您将 .then 放在错误的位置 - 将其放在 fetch 之后，而不是事件侦听器之后。

var element = document.getElementById("email-signup");
element.addEventListener("submit", function(event) 
  event.preventDefault()
  fetch("", 
    method: "POST",
    body: new FormData(document.getElementById('email-signup'))
  ).then((res) => 
    if (res.ok) alert('Selamat email anda sudah terdaftar!')
  )
)

一致的缩进将帮助您避免将来出现此类问题。 （看到你的问题，我修正了格式 - 现在应该很清楚问题是什么）

【讨论】：

是的，我在您回答之前编辑了代码。但问题仍然存在。它仍然会将我重定向到一个新页面，而不是弹出警报。

检查您的浏览器控制台是否有错误 - 如果有问题，不是这里的代码，因为如果脚本运行，event.preventDefault() 将阻止表单提交。

浏览器控制台中没有错误表明我的fetch POST错误，因为电子邮件已顺利存储在我的服务器中。但它仍然重定向我，甚至它没有显示我放在 .then() 之后的 console.log。如果还有错误，我什至会给出 .catch()

在加载页面时查找任何错误，而不是在提交表单时

@AdithWidyaPradipta 即使出现 Javascript 错误，本机表单 POST 仍将正常运行（并将电子邮件发送到您的服务器，并重定向页面）。

【参考方案2】：

您可能将 JavaScript 代码放在 HTML 之前，将 .then() 放在 EventListner 之后。

解决方案是将 JavaScript 代码放在 HTML 之后，然后将 .then() 放在 fetch 之后。

    <form id="email-signup" action="http://www.server.com" method="post">
        <input id="firstname-input" type="hidden" name="firstname" value="">
        <input type="text" name="email" placeholder="Input Email">
        <input type="hidden" name="campaign[id]" value="1">
        <input type="hidden" name="campaign[name]" value="Text Campaign">
        <input type="submit" value="Submit">
    </form>

<script>
    var element = document.getElementById("email-signup");
    element.addEventListener("submit", function(event) 
        event.preventDefault()
        fetch("", 
            method: "POST",
            body: new FormData(document.getElementById('email-signup'))
            ).then(() => 
            alert('Selamat email anda sudah terdaftar!')
        )
    )
</script>

【讨论】：

OP 评论了there is no error in developer tools console - 如果你说的是对的，显然会有错误......但是，我相信你是对的，我不相信控制台没有错误

是的，控制台中有一些错误。但它与表单和端点无关。错误来自其他工具emarsys，而不是我用于电子邮件注册的工具。我使用 moengage 和 optimonk。 @JaromandaX