如何在 JavaScript 中停止提交时刷新页面？
在本教程中，我们将学习如何在 JavaScript 中停止表单提交时刷新页面。
让我们介绍实现此目标的方法。
使用 event.preventDefault() 停止表单提交时的页面刷新
在本节中，我们将了解如何使用 event.preventDefault() 停止表单提交时的页面刷新。event.preventDefault() 限制表单提交期间表单的默认页面刷新行为。
用户可以按照以下语法尝试此方法。
语法
<form id="formId"> <input type="text" value=="value"/> <input type="submit"/> </form>
该语法定义表单。
//获取表单元素
var form=document.getElementById("formId");
function submitForm(event){
//防止页面刷新
event.preventDefault();
}
//在表单提交期间调用函数。
form.addEventListener('submit', submitForm);
该语法为表单提交事件添加事件监听器。回调函数调用 event.preventDefault() 方法，以防止页面刷新。
示例
在此示例中，表单包含两个输入字段。当用户单击提交按钮时，事件处理程序回调函数开始执行。表单提交和防止页面刷新会立即发生。
<html>
<body>
<h2>Program to stop form refreshing page on submit in JavaScript using <i>event.preventDefault()</i></h2>
<form id="formId">
Name: <input type="text" name="name" required/><br><br> Email: <input type="email" name="email" required/><br><br>
<input type="submit" value="Submit!" />
</form>
<p id="opTag"></p>
<script>
var form = document.getElementById("formId");
var opTag = document.getElementById("opTag");
function submitForm(event) {
event.preventDefault();
form.style.display = "none";
opTag.innerHTML = "<b>Form submit successful</b>";
}
form.addEventListener('submit', submitForm);
</script>
</body>
</html>
使用"return false"在表单提交时停止页面刷新
在本节中，我们将了解如何使用"return false"在表单提交时停止页面刷新。"return false"取消页面刷新。
用户可以按照以下语法尝试此方法。
语法
<form onsubmit="jsFunction();return false">
<input type="checkbox" value="value">
<input type="submit"/>
</form>
该语法在表单提交操作上调用 JavaScript 函数。 "return false" 跟在函数调用之后。
示例
在此示例中，两个复选框是表单输入字段。表单具有提交事件回调函数和 return "false" 语句。
"return false" 语句删除表单提交时的页面刷新。提交按钮关闭，页面根据用户请求显示表单提交成功。
<html>
<body>
<h2>Program to stop form refreshing page on submit in JavaScript using <i>return false</i></h2>
<form id="retForm" onsubmit="submitFormReturn();return false;">
<input type="checkbox" id="bike" name="bike" value="Bike">
<label for="bike">Egan likes bike</label><br>
<input type="checkbox" id="car" name="car" value="Car">
<label for="car">Egna likes car</label><br><br>
<input type="submit" value="Submit">
</form>
<p id="retOp"></p>
<script>
var retForm = document.getElementById("retForm");
var retOp = document.getElementById("retOp");
function submitFormReturn(event) {
retForm.style.display = "none";
retOp.innerHTML = "<b>Form submit successful</b>";
}
</script>
</body>
</html>
使用 Ajax 表单提交在表单提交时停止页面刷新
在本节中，我们将了解如何使用 Ajax 表单提交在表单提交时停止页面刷新。Ajax 表单提交是提交表单而不刷新页面的另一种方式。
用户可以按照以下语法尝试此方法。
语法
<form id="ajxForm" onsubmit="submitFormAjax();">
<input type="text" value="value">
<input type="submit"/>
</form>
该语法定义了一个表单，其中包含执行表单提交的提交回调函数。
//获取表单数据
var data=new FormData(document.getElementById("formId"));
//创建 XMLHttpRequest
var xhr=new XMLHttpRequest();
//打开连接并将数据发送到服务器
xhr.open("POST", "SERVER-SCRIPT");
xhr.send(data);
//避免默认表单提交
return false;
该语法读取表单元素并打开 xhr 连接。然后通过阻止默认表单提交操作将表单数据发送到服务器。
示例
此示例中提供了一个包含四个文本字段的候选表单示例。表单提交事件函数读取此表单，创建 XMLHttpRequest，并启动连接以将数据发送到服务器。
函数定义末尾的"return false"语句停止默认表单提交，并进行 ajax 表单提交。
<html>
<body>
<h2>Program to stop form refreshing page on submit in JavaScript using <i>ajax form submit</i></h2>
<form id="ajxForm" onsubmit="submitFormAjax();">
<fieldset style="background: lightgrey; border: 5px solid #000;">
<legend>Candidate Data</legend>
<input type="text" name="firstname" placeholder="First name"><br/><br/>
<input type="text" name="lastname" placeholder="Last name"><br/><br/>
<input type="text" name="email" placeholder="Email"><br /><br/>
<input type="text" name="phone" placeholder="Phone"><br /><br/>
<input type="submit" value="Submit">
</fieldset>
</form>
<script>
function submitFormAjax(event) {
var ajxForm = document.getElementById("ajxForm");
var data = new FormData(ajxForm);
var xhr = new XMLHttpRequest();
xhr.open("POST", "");
xhr.send(data);
xhr.onload = function() {
alert("Submitted");
};
return false;
}
</script>
</body>
</html>
使用 fetch API 表单提交在表单提交时停止页面刷新
在本节中，我们将了解如何使用 fetch API 表单提交在表单提交时停止页面刷新。fetch API 表单提交是另一种无需页面刷新即可提交表单的方法。ajax 表单提交后，页面会重新呈现。
用户可以按照以下语法尝试此方法。
语法
<form id="fetchForm" onsubmit="submitFormFetch ();"> <select> <option value="value"></option> <input type="submit"/> </form>
该语法有一个带有提交函数调用的表单，用于执行 fetch API 表单提交。
//获取表单
var data=new FormData(document.getElementById("formId"));
//使用 fetch 语法提交表单数据
fetch("SERVER-SCRIPT", { method: "post", body: data });
//停止默认表单提交操作
return false;
该语法通过停止默认表单提交来读取表单数据并使用 fetch API 提交。
示例
在此示例中，尝试将 select 下拉列表作为输入字段。表单具有提交函数，可获取表单数据并提交。函数末尾的"return false"语句默认停止表单提交操作。观察页面在提取 API 表单提交后重新渲染。
<html>
<body>
<h2>Program to stop form refreshing page on submit in JavaScript using <i>fetch form submit</i></h2>
<form id="fetchForm" onsubmit="submitFormFetch();">
<label for="city">RaceCourse:</label>
<select name="racecourse" id="racecourse">
<option value="ascot">Ascot</option>
<option value="belmont">Belmont</option>
</select><br><br>
<input type="submit" value="Submit!" />
</form>
<script>
function submitFormFetch(event) {
var fetchForm = document.getElementById("fetchForm");
var data = new FormData(fetchForm);
fetch("", {
method: "post",
body: data
})
.then((res) => {
return res.text();
})
.then((txt) => {
alert("Submit Success");
})
.catch((err) => {
alert(err);
});
return false;
}
</script>
</body>
</html>
本教程教了我们四种方法来阻止表单在提交时刷新页面。preventDefault() 和 "return false" 方法用于在默认表单提交时停止页面刷新。ajax 方法和 fetch API 方法是无需刷新页面即可提交表单的替代方法。
