如何阻止 HTML 表单默认提交导致页面刷新-html教程-PHP中文网

如何阻止 HTML 表单默认提交导致页面刷新

本文详解表单提交时页面意外刷新的根本原因，指出未阻止默认行为、DOM 方法调用错误及 innerHTML 误用三大常见问题，并提供可直接运行的修复方案。

本文详解表单提交时页面意外刷新的根本原因，指出未阻止默认行为、dom 方法调用错误及 `innerhtml` 误用三大常见问题，并提供可直接运行的修复方案。

在 Web 开发中，使用

元素配合 JavaScript 处理用户输入是基础操作，但一个看似微小的疏忽——比如忘记阻止表单默认提交行为——就会导致页面瞬间刷新、控制台报错一闪而过、逻辑无法执行等“神秘失效”现象。你遇到的正是典型场景：点击按钮后页面重载，console.log("test") 虽然执行了，但后续 DOM 操作因页面刷新而中断。

根本原因有三点：

表单默认提交行为未被阻止：在内默认类型为 submit，点击即触发表单提交；若无 action 属性，浏览器会向当前 URL 发起 GET 请求，造成整页刷新；
DOM 查询方法缺失 document. 前缀：getElementById('lenom') 是无效调用，正确写法是 document.getElementById('lenom')，否则会抛出 ReferenceError；
innerHTML 是属性而非方法：误写为 body.innerHTML(...) 会导致 TypeError: body.innerHTML is not a function。

✅ 正确做法是：监听表单的 submit 事件（而非按钮的 click），调用 event.preventDefault() 阻止默认提交，并修正 DOM 操作语法：

// 监听整个表单的提交事件，更语义化且兼容性更好
const formulaire = document.getElementById('formulaire');
formulaire.addEventListener('submit', (e) => {
  e.preventDefault(); // ✅ 关键：阻止页面刷新

  const baliseNom = document.getElementById('lenom'); // ✅ 补全 document.
  const nom = baliseNom.value.trim();

  if (!nom) {
    alert('Veuillez entrer un nom valide.');
    return;
  }

  const body = document.querySelector('body');
  body.innerHTML = `<p>Test : ${nom}</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img
														src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="overflowclass">DeepBI DHTML 页面生成器</a>
													<p class="overflowclass">生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：

- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；  
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；  
- 提及位于 `apps/console/src/featur</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>`; // ✅ innerHTML 是赋值属性，非函数调用
});

? 额外建议与注意事项：

不要将逻辑绑定到按钮 click 上，因为用户可能通过回车键提交表单，submit 事件能覆盖所有提交途径；
使用 trim() 清除首尾空格，提升数据健壮性；
若需保留原有页面结构（如 header、main），避免用 innerHTML = ... 全量替换 body，推荐使用 insertAdjacentHTML() 或创建元素插入：
```
const p = document.createElement('p');
p.textContent = `Test : ${nom}`;
document.querySelector('main').appendChild(p);
```
确保 <script></script> 标签使用 defer（如你已做）或置于前，保证 DOM 加载完成后再执行脚本。