[英]POST request Fetch API prevent redirect
因此,我想制作一个纯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!')
})
问题是,每当我向该表单提交电子邮件时,都会将我重定向到新页面,并返回成功。 我想防止这种情况发生,而是会弹出一个警报,告诉我电子邮件提交成功。
您将.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!')
})
})
一致的缩进将帮助您将来避免此类问题。 (请参阅您的问题,我已修复格式-现在应该很清楚问题出在哪里)
可能是将JavaScript代码放在HTML之前,并将.then()放在EventListner之后。
解决方案是将JavaScript代码放在HTML后面,然后将.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.