HTML表单提交刷新而非执行JS：深入解析与解决方案

花韻仙語

发布时间：2025-09-19 20:22:01

322人浏览过

来源于php中文网

原创

HTML表单提交刷新而非执行JS：深入解析与解决方案

本文旨在解决HTML表单提交后意外刷新而非执行JavaScript的问题。核心原因在于

这里的"JavaScript"并不是一个有效的JavaScript MIME类型。根据MDN Web文档，浏览器识别的JavaScript MIME类型主要是text/javascript。当type属性被设置为一个非标准或无效的值时，浏览器会将其视为一个“数据块”而非可执行的脚本。这意味着script.js文件中的addUser()函数根本不会被加载到页面上下文中。

当用户提交表单时，浏览器尝试执行onsubmit="addUser(); return false;"。由于addUser()函数未被定义（因为它所在的脚本文件没有被解析），调用addUser()会导致一个JavaScript错误。这个错误会中断onsubmit事件的处理流程，使得return false语句永远无法被执行到。因此，表单的默认提交行为没有被阻止，页面随即刷新。

解决方案：正确的JavaScript脚本引入方式

解决此问题的关键在于确保浏览器能够正确识别并加载你的JavaScript文件。有两种推荐的方法：

1. 使用标准的JavaScript MIME类型
将
这是过去常用且完全有效的方法。浏览器会识别text/javascript为JavaScript代码，并正确解析执行script.js中的内容。

2. 省略type属性（推荐）

对于现代浏览器，当引入外部JavaScript文件时，最推荐的做法是完全省略type属性：

当

JavaScript文件script.js保持不变：

function addUser() {
  console.log('Hello');
  alert('Hello');
}

通过上述修正，addUser()函数将被正确加载，onsubmit事件中的addUser()调用将成功执行，随后的return false也将生效，从而阻止表单的默认提交行为，并弹出预期的alert消息。

注意事项与总结
检查浏览器控制台：当JavaScript行为不符合预期时，始终首先打开浏览器的开发者工具（通常按F12），查看“控制台”（Console）选项卡。任何未定义的函数调用或脚本加载错误都会在这里清晰地显示。
MIME类型的重要性：理解HTTP MIME类型在Web资源处理中的作用至关重要。错误的MIME类型会导致浏览器无法正确解析文件内容。
type="module"的情况：如果你计划使用ES模块（ESM）语法，那么type="module"是正确的。但需要注意的是，模块的加载和执行规则与传统脚本不同，并且可能涉及CORS（跨域资源共享）策略，尤其是在本地文件系统或不同源加载时。本案例中的问题并非type="module"本身，而是type="JavaScript"这个无效值。
脚本路径：确保src属性中的脚本路径是正确的，否则即使type属性设置正确，脚本也无法加载。
通过遵循这些最佳实践，可以有效避免因脚本加载问题导致的表单提交异常，确保Web应用程序的JavaScript功能按预期运行。

相关文章


如何在 DataTables 导出 PDF 时自动换行以避免列溢出

如何在隐藏滚动条的同时保持页面可滚动功能

怎样处理点击事件_javascript事件监听器如何工作【教程】

javascript如何优化页面性能？【教程】

javascript如何进行DOM操作_怎样动态修改网页内容【教程】

HTML速学教程(入门课程)
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载

相关标签:

css javascript java html js 前端 ajax 浏览器工具跨域 web应用程序 html表单 ajax JS console 事件 alert input http

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

上一篇：如何通过JavaScript实现颜色渐变效果？下一篇：解决HTML表单提交时刷新页面的问题

作者最新文章

使用 React Context API 管理跨路由的表单 ID 状态

2026-01-27 15:09

去哪儿网app能值机吗

2026-01-27 15:13

Vue 3 中使用 v-model 实现子组件对父组件 prop 的双向绑定

2026-01-27 15:13

如何为标签（label）设置固定宽度以实现表单对齐

2026-01-27 15:19

《噬血代码2》IGN6分有亮点但没有跟上时代

2026-01-27 15:25

如何在 Python 中动态获取父类名称而非当前实例的实际类名

2026-01-27 15:32

Go 中通过值接收器无法修改结构体字段：必须使用指针接收器实现状态变更

2026-01-27 15:44

Java Android 命名捕获组兼容性问题及解决方案

2026-01-27 15:49

检测通过 window.open 打开的新窗口是否加载完成

2026-01-27 15:53

3649元起！七彩虹5060 Ti、5070迷你白卡正式开卖

2026-01-27 16:18

热门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助手

AI 编程开发 Agent智能体

相关专题

更多

ajax教程
php中文网为大家带来ajax教程合集，Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容，供大家免费下载使用。

159

2023.06.14

ajax中文乱码解决方法
ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容，供大家免费下载体验。

160

2023.08.31

ajax传递中文乱码怎么办
ajax传递中文乱码的解决办法：1、设置统一的编码方式；2、服务器端编码；3、客户端解码；4、设置HTTP响应头；5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。

117

2023.11.15

ajax网站有哪些
使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。

234

2024.09.24

js正则表达式
php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法，还有更多js正则表达式的相关文章、相关下载、相关课程，供大家免费下载体验。

513

2023.06.20

js获取当前时间
JS全称JavaScript，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言，主要用于Web，常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢？php中文网给大家带来了相关的教程以及文章，欢迎大家前来学习阅读。

244

2023.07.28

js 字符串转数组
js字符串转数组的方法：1、使用“split()”方法；2、使用“Array.from()”方法；3、使用for循环遍历；4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容，供大家免费下载体验。

298

2023.08.03

js是什么意思
JS是JavaScript的缩写，它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言，通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果，如表单验证、页面元素操作、动画效果、数据交互等。

5306

2023.08.17

Python 自然语言处理（NLP）基础与实战
本专题系统讲解 Python 在自然语言处理（NLP）领域的基础方法与实战应用，涵盖文本预处理（分词、去停用词）、词性标注、命名实体识别、关键词提取、情感分析，以及常用 NLP 库（NLTK、spaCy）的核心用法。通过真实文本案例，帮助学习者掌握使用 Python 进行文本分析与语言数据处理的完整流程，适用于内容分析、舆情监测与智能文本应用场景。

10

2026.01.27

热门下载

更多

网站特效
/
网站源码
/
网站素材
/
前端模板

[表单按钮]iPicker多级联动城市选择组件

[图片特效]CSS3实现3D图片翻转洗牌特效

[表单按钮]vue.js表单密码强度验证代码

[图片特效]React框架制作人物介绍切换特效

[表单按钮]jQuery手机登录注册表单代码

[图片特效]jquery图片移位效果

[表单按钮]html5手机登录表单验证代码

[表单按钮]Ctrl+Enter键按钮提交表单代码

[图片特效]jquery带标题控制图片切换

[表单按钮]jQuery表单元素动态增加删除代码

[电商源码]openaishop

[其它模板]思翔企(事)业单位文件柜 build 20080313

[企业站源码]雅龙智能装备工业设备类WordPress主题1.0

[电商源码]威发卡自动发卡系统

[电商源码]卡密分发系统

[电商源码]中华陶瓷网

[电商源码]简洁粉色食品公司网站

[电商源码]极速网店系统

[电商源码]淘宝妈妈_淘客推广系统

[电商源码]积客B2SCMS商城系统

[网站素材]美味披萨INS宣传模板设计下载

[网站素材]新春喜庆烟花装饰合集矢量素材

[网站素材]摩托机车宣传海报设计源文件下载

[网站素材]日式美食寿司料理海报矢量模板

[网站素材]创意个人手绘工作室票券设计下载

[网站素材]新春红色喜庆鞭炮插画矢量素材

[网站素材]情人节爱心元素主题海报PSD模板下载

[网站素材]新春灯笼喜庆边框背景矢量素材

[网站素材]唯美渔船水墨风景矢量素材

[网站素材]情人节半价促销折扣海报PSD源文件下载

[前端模板]驾照考试驾校HTML5网站模板

[前端模板]驾照培训服务机构宣传网站模板

[前端模板]HTML5房地产公司宣传网站模板

[前端模板]新鲜有机肉类宣传网站模板

[前端模板]响应式天气预报宣传网站模板

[前端模板]房屋建筑维修公司网站CSS模板

[前端模板]响应式志愿者服务网站模板

[前端模板]创意T恤打印店网站HTML5模板

[前端模板]网页开发岗位简历作品展示网页模板

[前端模板]响应式人力资源机构宣传网站模板

相关下载

更多

php商城系统

淘源码商城PHP淘宝查信誉

PHP房产程序[BBWPS]

PHP简约自动发卡平台个人版

ERMEB域名PHP离线网络授权系统

Difeye-敏捷的轻量级PHP框架

大泉州汽车网PHP整站程序

精品课程

更多

相关推荐
/
热门推荐
/
最新课程

Sass 教程

共14课时 | 0.8万人学习

Bootstrap 5教程

共46课时 | 3万人学习

CSS教程

共754课时 | 24.5万人学习

JavaScript ES5基础线上课程教学

共6课时 | 11.2万人学习

最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

共79课时 | 151.6万人学习

phpStudy极速入门视频教程

共6课时 | 53.4万人学习

最新Python教程从入门到精通

共4课时 | 22.3万人学习

JavaScript ES5基础线上课程教学

共6课时 | 11.2万人学习

PHP新手语法线上课程教学

共13课时 | 0.9万人学习

最新文章

更多

如何让页面加载逻辑具备容错能力：替代 window.onload 的现代方案

如何让页面加载逻辑具备容错能力并支持多 GeoGebra 小程序注入

如何实现网页加载时 GeoGebra 小程序注入的容错与可靠执行

标题：Three.js 使用 CDN 正确加载 STL 模型的完整教程

如何使用 Lodash 统计对象中值为 undefined 的属性数量

Vite 中如何在构建时排除特定代码块（开发环境保留、生产环境移除）

如何正确获取 Puppeteer 中已存在的页面对象以执行连续跳转

如何正确获取 Puppeteer 中已存在的页面对象以避免 goto 报错

如何在 MUI DataGrid 中实现表头文字顶部居中对齐

Three.js 中使用 CDN 正确加载 STL 模型的完整教程