极客笔记使用event.preventDefault()在表单提交时停止页面刷新
在本教程中，我们将学习如何在JavaScript中阻止表单提交时刷新页面。
让我们来介绍一些实现这个目标的方法。
使用event.preventDefault()来阻止表单提交时页面刷新
在本节中，我们将看到如何使用 event.preventDefault() 来阻止表单提交时页面刷新。event.preventDefault()限制了表单在提交时的默认页面刷新行为。
用户可以按照下面的语法尝试这种方法。
语法
<form id="formId">
<input type="text" value=="value"/>
<input type="submit"/>
</form>
语法定义了形式。
//Get form element
var form=document.getElementById("formId");
function submitForm(event){
//Preventing page refresh
event.preventDefault();
}
//Calling a function during form submission.
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”在函数调用之后。
示例
在这个例子中，两个复选框是表单的输入字段。表单具有提交事件回调函数和返回”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>
该语法定义了一个带有提交回调函数的表单，该回调函数执行表单提交操作。
//Get the form data
var data=new FormData(document.getElementById("formId"));
//Create XMLHttpRequest
var xhr=new XMLHttpRequest();
//Open the connection and send the data to the server
xhr.open("POST", "SERVER-SCRIPT");
xhr.send(data);
//Avoids default form submit
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来执行表单提交的submit函数调用的形式。
//Get the form
var data=new FormData(document.getElementById("formId"));
//Use fetch syntax to submit the form data
fetch("SERVER-SCRIPT", { method: "post", body: data });
//Stop default form submit action
return false;
语法通过停止默认表单提交来读取表单数据并使用fetch API提交表单数据。
实例
在此示例中，尝试将选择下拉框作为输入字段。表单具有提取表单数据并提交的submit函数。函数末尾的”return false”语句默认停止表单提交动作。观察在fetch 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方法是在不刷新页面的情况下提交表单的替代方法。