[英]POST Fetch request causing page to reload using javascript and submit form with prevent default
我正在研究一个轨道 API + Javascript 项目,在 html 上有一个简单的表格。 每次我点击提交按钮时,我的所有代码都会执行,但随后浏览器页面会重新加载。
这是 HTML 代码:
<form id="create-player">
<h3>Enter Your Name</h3>
<input
type="text"
name="name"
value=""
placeholder="Enter your name..."
class="input-text"
/>
<br />
<input
type="submit"
name="submit"
value="SUBMIT"
class="submit"
/>
</form>
然后我的js代码:
document.addEventListener("DOMContentLoaded", () => {
//submit form action
player_form.addEventListener("submit", function(a){
a.preventDefault();
console.log('submit pressed')
fetchNewPlayer(a.target.name.value);
});
})
function fetchNewPlayer(name){
console.log('start fetch')
let formData = {
name: name
}
let configObj = {
method: "POST",
headers: {
"Content-Type": "application/json",
"Accept": "application/json"
},
body: JSON.stringify(formData)
};
fetch('http://localhost:3000/players', configObj)
.then(function(response) {
console.log('fetching', response);
return response.json();
})
.then(function(object) {
console.log('then', object);
})
.catch(function(error) {
console.log('failed', error);
alert("Error");
});
}
疯狂的部分是,如果我评论 fetchNewPlayer,页面不会重新加载。 有人可以帮我理解什么是错的吗?
您需要使用AbortController
:
let abortController = new AbortController();
let configObj = {
method: "POST",
headers: {
"Content-Type": "application/json",
"Accept": "application/json"
},
body: JSON.stringify(formData),
signal : abortController.signal
};
window.onbeforeunload = function(e) { abortController.abort(); };
fetch('http://localhost:3000/players', configObj)
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.