Question

所以我想制作一个纯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!')
})

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

Answer 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!')
  })
})

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

Answer 2

可能，您在JavaScript之前放置JavaScript代码，在EventListner之后放置.then（）。

解决方案是在HTML之后放置JavaScript代码，然后在获取后放置.then（）。

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

POST请求Fetch API阻止重定向

2 个答案: