数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 JavaScript 中提交表单时停止页面刷新？
在本教程中，我们将学习如何在 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" 紧跟在函数调用之后。
示例
在此示例中，两个复选框是表单输入字段。表单具有提交事件回调函数和 "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>
语法定义了一个表单，其中包含执行表单提交的提交回调函数。
//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 表单提交的提交函数调用。
//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 提交它，同时停止默认表单提交。
示例
在此示例中，尝试使用选择下拉菜单作为输入字段。表单具有 fetch 表单数据并提交它的提交函数。函数末尾的 "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 方法是无需页面刷新即可提交表单的替代方法。
84K+ 浏览量
