如何阻止表单提交导致的页面跳转（路由变更）

心靈之曲

发布时间：2026-02-09 13:58:30

912人浏览过

来源于php中文网

原创

如何阻止表单提交导致的页面跳转（路由变更）

在单页应用中，若未正确阻止表单默认提交行为，即使返回 false 或绑定 onsubmit 事件，浏览器仍会执行

你已在 send_mail 函数末尾写了 return false;，但该语句仅在事件处理函数以传统内联方式（如

。而你使用的是 DOM 属性赋值方式（onsubmit = send_mail），此时 return false 不会自动触发浏览器的默认行为拦截机制——它只是函数的返回值，对事件流无控制力。

✅ 正确做法：在事件处理函数开头调用 event.preventDefault()：

醒蓝AI

一键快速生成Al形象照、证件照、写真照的强大AI换脸软件

下载

function send_mail(event) {
  event.preventDefault(); // ✅ 关键：立即阻止默认提交行为

  const recipients = document.querySelector('#compose-recipients').value;
  const subject = document.querySelector('#compose-subject').value;
  const body = document.querySelector('#compose-body').value;

  fetch('/emails', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ recipients, subject, body })
  })
  .then(response => {
    if (!response.ok) throw new Error('Network response was not ok');
    return response.json();
  })
  .then(result => {
    console.log('Email sent:', result);
    load_mailbox('sent');
  })
  .catch(error => {
    console.error('Error sending email:', error);
    alert('Failed to send email. Please try again.');
  });
}

⚠️ 注意事项：

event.preventDefault() 必须在函数首行或逻辑判断前调用，确保在任何异步操作（如 fetch）之前生效；
建议同时添加 headers: { 'Content-Type': 'application/json' }，避免后端解析失败；
不要依赖 return false 替代 preventDefault() —— 它在现代事件绑定中不可靠；
若后续需支持键盘提交（如回车），此方案同样生效，因 onsubmit 事件会捕获所有提交触发源。

总结：单页应用中表单“静默提交”的唯一可靠方式，是在 submit 事件处理器中主动调用 event.preventDefault()。这是 DOM 事件规范的标准实践，与框架无关，也是现代前端开发的必备基础技能。

如何从网页中安全提取并解析嵌入的 JSON 数据（如 App = {...}）

ArcGIS 页面中动态加载的 ZIP 文件批量下载完整教程

eq 如何支持与不同类型的对象比较且返回合理结果

如何绕过纽约时报的 JavaScript 验证，高效提取文章正文内容

Python 如何在类里实现类似 JavaScript 的可选链式调用

路由优化大师

路由优化大师是一款及简单的路由器设置管理软件，其主要功能是一键设置优化路由、屏广告、防蹭网、路由器全面检测及高级设置等，有需要的小伙伴快来保存下载体验吧！

下载

相关标签:

javascript java html js 前端 json 处理器浏览器 app 后端前端开发 ai 路由 json Event 事件 dom 异步 input

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：如何高效创建单个或批量单位矩阵的 NumPy 数组下一篇：如何自动化抓取 CoinCodex 交互式图表中的历史市场数据

作者最新文章

如何用html写一个手机号码

2026-02-13 16:59

Drupal 9 模块 YAML 配置安装失败：依赖项未满足的解决方案

2026-02-13 17:07

Go语言中使用mgo驱动连接MongoDB时的EOF错误解决方案

2026-02-13 17:08

js如何往html文本框中写入初始值

2026-02-13 17:15

使用 Numba 实现 DataFrame 中折叠计算的高效向量化

2026-02-13 17:17

html如何控制表格列宽不一样

2026-02-13 17:19

Java中实现运行时动态选择报告类并完整序列化所有字段的教程

2026-02-13 17:19

Prisma 中 Decimal 字段的序列化行为解析与优雅处理方案

2026-02-13 17:19

html5如何做一个表的标题效果

2026-02-13 17:29

如何在 Laravel 中按非唯一字段对查询结果进行二维分组

2026-02-13 17:43

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI 编程开发 AI 聊天问答

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI 编程开发 AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI 编程开发 Agent智能体

腾讯元宝

腾讯混元平台推出的AI助手

文档处理 AI 聊天问答

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI 编程开发 AI 文本写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI 文本写作中文写作

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

AI 图片处理图片拼接

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI 编程开发 AI 文本写作

智谱清言 - 免费全能的AI助手

AI 编程开发 Agent智能体

相关专题

json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章，帮助大家解决问题。

436

2023.08.07

json是什么

JSON是一种轻量级的数据交换格式，具有简洁、易读、跨平台和语言的特点，JSON数据是通过键值对的方式进行组织，其中键是字符串，值可以是字符串、数值、布尔值、数组、对象或者null，在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容，供大家免费下载体验。

544

2023.08.23

jquery怎么操作json

操作的方法有：1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”；3、“$.each(obj, callback)”；4、“$.ajax()”。更多jquery怎么操作json的详细内容，可以访问本专题下面的文章。

317

2023.10.13

go语言处理json数据方法

本专题整合了go语言中处理json数据方法，阅读专题下面的文章了解更多详细内容。

2025.09.10

DOM是什么意思

dom的英文全称是documentobjectmodel，表示文件对象模型，是w3c组织推荐的处理可扩展置标语言的标准编程接口；dom是html文档的内存中对象表示，它提供了使用javascript与网页交互的方式。想了解更多的相关内容，可以阅读本专题下面的文章。

3709

2024.08.14

点击input框没有光标怎么办

点击input框没有光标的解决办法：1、确认输入框焦点；2、清除浏览器缓存；3、更新浏览器；4、使用JavaScript；5、检查硬件设备；6、检查输入框属性；7、调试JavaScript代码；8、检查页面其他元素；9、考虑浏览器兼容性。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。

193

2023.11.24