如何在 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 方法是无需刷新页面即可提交表单的替代方法。