本文旨在解决表单提交后页面重定向的问题，提供一种使用 JavaScript 阻止默认提交行为的有效方法。通过 event.preventDefault()，您可以控制表单提交后的行为，避免不必要的页面跳转，从而提升用户体验，确保数据正确提交至 Webhook，并保持用户在当前页面。
问题分析
在 Web 开发中，HTML 表单默认的行为是在提交后刷新或重定向页面。这通常是因为表单的 action 属性指定了一个 URL，浏览器会尝试导航到该 URL。如果 action 指向当前页面或一个空字符串，则页面可能会刷新。当表单需要通过 AJAX 或其他方式异步提交数据时，这种默认行为会干扰预期的流程，导致用户体验不佳。
解决方案：使用 event.preventDefault()
JavaScript 提供了 event.preventDefault() 方法来阻止事件的默认行为。对于表单提交事件，这意味着可以阻止浏览器执行默认的页面重定向操作。
实现步骤：
立即学习“Java免费学习笔记（深入）”；
-
获取表单引用： 首先，需要获取 HTML 表单元素的引用。可以使用 document.getElementById()、document.querySelector() 或其他 DOM 选择器来实现。
const formReference = document.querySelector('form[name="myForm"]'); // 假设表单的 name 属性为 "myForm" -
绑定 submit 事件监听器： 为表单绑定一个 submit 事件监听器。当用户点击提交按钮时，该监听器会被触发。
formReference.onsubmit = (event) => { // 在这里处理表单提交逻辑 }; -
阻止默认行为： 在事件处理函数中，调用 event.preventDefault() 方法。这将阻止表单的默认提交行为，即页面重定向。
formReference.onsubmit = (event) => { event.preventDefault(); // 在这里处理表单提交逻辑，例如使用 AJAX 发送数据 console.log("表单已提交，但页面不会重定向。"); };
完整示例：
<form name='myForm' data-form-id='IdFromWebhook' action='WebhookLink' method='post'>
<div class="row">
<div class="col-lg-12">
<div class="form-group text_box">
<label for='EMAIL_ADDRESS'>E-mail: </label><input id='insightly_email' name='email' type='text' required>
</div>
</div>
<div class="col-lg-6">
<div class="form-group text_box">
<label for='FIRST_NAME'>First name: </label><input id='insightly_firstName' name='firstName' type='text' required>
</div>
</div>
<div class="col-lg-6">
<div class="form-group text_box">
<label for='LAST_NAME'>Last Name: </label><input id='insightly_lastName' name='lastName' type='text' required>
</div>
</div>
<div class="col-lg-4">
<div class="form-group text_box">
<label for='Language__c'>Choose a language: </label>
<select id='insightly_language' name='language' required>
<option value='EN'>EN</option>
<option value='FR'>FR</option>
<option value='DE'>DE</option>
</select>
</div>
</div>
</div>
<!--Bouton d'envoi-->
<div style="display:flex;justify-content:center"><input class="btn_three" type='submit' value='Submit'></div>
</form>
<script>
const formReference = document.querySelector('form[name="myForm"]');
formReference.onsubmit = (event) => {
event.preventDefault();
// 模拟使用 AJAX 发送数据
setTimeout(() => {
console.log("数据已发送到 Webhook!");
// 在这里可以执行成功后的操作，例如显示成功消息
alert("提交成功!");
}, 1000);
};
</script>注意事项：
- 确保在 event.preventDefault() 之后编写表单提交的逻辑代码，例如使用 AJAX 发送数据。
- 如果需要在表单提交后执行某些操作，例如显示成功消息或重置表单，请在 event.preventDefault() 之后添加相应的代码。
- event.preventDefault() 只会阻止默认行为，不会阻止事件的冒泡传播。如果需要阻止事件传播，可以使用 event.stopPropagation() 方法。
总结
通过使用 event.preventDefault() 方法，可以轻松地阻止表单提交后的页面重定向，从而实现更灵活的表单处理逻辑。这在单页应用 (SPA) 和需要异步提交数据的场景中尤其有用。 掌握这种技巧可以帮助您构建更流畅、更用户友好的 Web 应用程序。
