在表单提交时禁用浏览器默认刷新，需在submit事件处理函数中调用event.preventdefault()；若用type="submit"按钮则必须如此，而type="button"则不触发submit事件；还可禁用按钮防重复提交。

在表单提交时禁用浏览器默认刷新，核心是调用事件对象的 preventDefault() 方法。

监听 submit 事件并阻止默认行为

表单的默认提交行为会触发送 GET 或 POST 请求，并导致页面刷新。必须在 submit 事件处理函数中调用 event.preventDefault()，而不是在按钮的 click 事件里——因为表单可能通过回车键提交，click 无法覆盖该路径。

• 给 <form></form> 元素绑定 submit 事件
• 在回调函数第一行立即执行 event.preventDefault()
• 之后可自由执行 AJAX 提交、表单校验、跳转等逻辑

常见写法示例

HTML 中确保有 <form></form> 标签（不能只用按钮）：

  
  提交

JavaScript 中：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

document.getElementById('myForm').addEventListener('submit', function(e) {
  e.preventDefault(); // 关键：阻止刷新
  // 此处写你的逻辑，比如：
  // fetch('/api/login', { method: 'POST', body: new FormData(e.target) });
});

注意 type="submit" 和 type="button" 的区别

表单内按钮的 type 属性很重要：

• type="submit"（默认值）：点击会触发表单的 submit 事件，也触发默认提交
• type="button"：仅触发 click，不提交表单，也不触发 submit 事件

若用 type="button"，就无需 preventDefault()，但需手动收集数据并发起请求——适合完全自定义流程的场景。

补充：避免重复提交的小技巧

阻止默认行为后，用户可能连续点击提交按钮。可在提交开始时禁用按钮：

e.target.querySelector('button[type="submit"]').disabled = true;

成功或失败后再恢复（记得用 finally 或显式恢复），防止重复请求。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南