[英]How prevent reload after post request?
我正在尝试向服务器发出发布请求并对响应做一些事情。 事情似乎在服务器端起作用。 问题是页面在响应完成后重新加载,我无法对响应做任何事情。
常见的建议是使用button
或preventDefault
。 这些建议并不能解决问题:正如您在下面看到的,输入类型是button
(不是submit
)并且 event 上的preventDefault()
不起作用。
有人知道我缺少什么吗?
<form id="modelCodeForm">
<label for="codehere"></label>
<div id="modelAreaDiv">
<textarea id="modelArea" cols="60" rows="20">
stuff
</textarea>
<br>
<input id="submitUserModel" type="button" value="run on server">
</div>
</form>
function initializeUserModel(){
let model = document.getElementById("modelArea").value;
fetch('http://localhost:8080/', {
method: 'post',
headers: {'Content-Type': 'text/plain'},
body: model
})
.then(response => response.json())
.then(data => {
console.log(data);
}).then(console.log("received!"))
}
我明白了这一点。 事实证明,问题是由于 VS Live Server 检测到文件夹中的更改并热加载应用程序造成的。 更改是由于后端在同一文件夹中保存日志。 错过真的很傻...
如果您想在提交表单时触发 function,那么您可以使用 HTML forms 上可用的“onsubmit”事件侦听器。
所以你会做onsubmit="initializeUserModel(event)" 。 您将事件 object 传递给它,这样您就可以在 function 中调用event.preventDefault()并停止重新加载页面。
将输入更改为 type="submit"(或将其设置为 type="submit" 的按钮),否则不会触发表单提交。
<form id="modelCodeForm" onsubmit="initializeUserModel(event)">
<label for="codehere"></label>
<div id="modelAreaDiv">
<textarea id="modelArea" cols="60" rows="20">Stuff</textarea>
<br />
<input id="submitUserModel" type="submit" value="run on server" />
</div>
</form>
function initializeUserModel(event) {
event.preventDefault();
let model = document.getElementById("modelArea").value;
fetch("http://localhost:8080/", {
method: "post",
headers: { "Content-Type": "text/plain" },
body: model,
})
.then((response) => response.json())
.then((data) => {
console.log(data);
})
.then(console.log("received!"));
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.