一、表单提交的默认行为与历史背景
在HTML发展的早期阶段，表单提交是网页交互的核心机制之一。当用户点击提交按钮时，浏览器会自动将表单数据发送到服务器，并跳转到新的页面或刷新当前页面。这种行为是浏览器的默认行为，适用于传统的多页应用（MPA）。
表单提交会触发页面刷新数据通过HTTP请求（GET或POST）发送到服务器服务器处理数据后返回新页面
二、现代前端开发中的挑战
随着Web应用的复杂化，用户对交互体验的要求越来越高。传统的页面刷新方式已经无法满足现代应用的需求。特别是在使用JavaScript框架（如React、Vue、Angular）和AJAX技术的场景中，开发者需要更细粒度地控制表单提交过程。
以下是一些典型的场景：
场景问题解决方案异步提交页面刷新导致用户体验中断使用AJAX或Fetch API异步提交数据表单验证提交前无法进行复杂校验阻止默认提交，手动校验数据后再提交单页应用（SPA）页面跳转会破坏前端路由使用event.preventDefault()防止跳转
三、为何要阻止默认跳转？
阻止默认跳转的核心在于提升用户体验和增强应用的交互能力。以下是几个关键原因：
避免页面刷新：刷新会中断用户当前操作，重置页面状态，影响体验。实现异步提交：通过AJAX或Fetch API，可以在不刷新页面的情况下提交数据。前置校验逻辑：在提交前进行格式校验、字段必填检查、错误提示等。支持前端路由：在SPA中，表单提交不应触发页面跳转，否则会破坏路由系统。统一数据处理流程：通过统一的JavaScript逻辑控制数据流向，提高代码可维护性。
四、如何阻止默认跳转？
最常见的方式是通过JavaScript事件对象调用 preventDefault() 方法。以下是一个基本示例：
document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止默认提交行为
// 手动处理表单数据
const formData = new FormData(event.target);
fetch('/api/submit', {
method: 'POST',
body: formData
});
});
五、表单处理流程图
以下是一个表单提交处理的流程图，展示了从用户点击提交按钮到数据发送的全过程：
graph TD
A[用户点击提交] --> B{是否阻止默认行为?}
B -->|是| C[执行JavaScript处理逻辑]
B -->|否| D[浏览器默认提交，页面刷新]
C --> E[执行表单校验]
E --> F{校验是否通过?}
F -->|是| G[收集表单数据]
F -->|否| H[提示错误信息]
G --> I[通过AJAX/Fetch提交数据]
I --> J[处理服务器响应]