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

心靈之曲

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

892人浏览过

来源于php中文网

原创

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

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

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

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

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

蚂蚁PPT

AI在线智能生成PPT

下载

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 事件规范的标准实践，与框架无关，也是现代前端开发的必备基础技能。

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

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

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

如何在 QML 中高效渲染带层级关系的 SQL 树形数据（支持展开/折叠与多选）

如何在网页无标准表格标签时高效提取结构化数据

路由优化大师

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

下载

相关标签:

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

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

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

作者最新文章

菜鸡云游戏如何领取免费时长

2026-02-07 16:28

蛙漫2漫画入口官网在哪

2026-02-07 16:32

嘀嗒出行车主认证要多久

2026-02-07 16:34

实现 iframe 滚动时顶部吸附并渐进缩放的响应式布局教程

2026-02-07 16:35

简化多组展开/收起按钮的交互逻辑：用 jQuery 一行绑定实现批量控制

2026-02-07 16:53

JavaScript 动态创建元素后立即消失的解决方案

2026-02-07 16:54

如何用字典映射和异常处理精简 Python 计算器代码

2026-02-07 17:00

如何在 PHP 中正确累加多维数组中所有数值并计算总和

2026-02-07 17:04

如何在 PHP 中高效查找 JSON 地理数据中距离最近的站点 ID

2026-02-07 17:10

如何正确累加多维数组中所有价格值并计算总金额

2026-02-07 17:27

热门AI工具

DeepSeek

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

AI 编程开发 AI 聊天问答

豆包大模型

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

AI 编程开发 AI大模型

通义千问

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

AI 编程开发 Agent智能体

腾讯元宝

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

文档处理 AI 聊天问答

文心一言

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

AI 编程开发 AI 文本写作

讯飞写作

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

AI 文本写作中文写作

即梦AI

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

图片拼接

ChatGPT

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

AI 编程开发 AI 文本写作

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

AI 编程开发 Agent智能体

相关专题

json数据格式

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

434

2023.08.07

json是什么

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

543

2023.08.23

jquery怎么操作json

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

315

2023.10.13

go语言处理json数据方法

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

2025.09.10

DOM是什么意思

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

3580

2024.08.14

点击input框没有光标怎么办

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

191

2023.11.24