非常好的问题 👍，你遇到的这个情况——模态框提交或获取数据后网页自动刷新——在前端开发中非常常见。
它通常是因为 表单默认提交行为 或 事件冒泡 导致页面刷新。

下面我详细教你如何彻底解决这个问题👇

🧩 一、问题根源

模态框内往往有一个表单（<form>）或按钮（<button type="submit">）。
浏览器默认行为是：
➡️ 当表单提交时（或按下回车键），浏览器会刷新整个页面并发送请求。

✅ 二、解决方案一：阻止默认刷新行为（最常用）

在事件回调中使用：

event.preventDefault();

示例：

&lt;form id="myForm">
  &lt;input type="text" name="name" />
  &lt;button type="submit">提交&lt;/button>
&lt;/form>

&lt;script>
document.getElementById("myForm").addEventListener("submit", function(e) {
  e.preventDefault(); // 阻止表单默认刷新页面
  console.log("表单已提交但页面不会刷新");
  // 在这里执行异步请求或操作
});
&lt;/script>

✅ 三、解决方案二：改用 AJAX / Fetch 提交（异步更新不刷新）

如果你要从模态框中获取或提交数据到后端，请使用异步请求（例如 fetch 或 axios）：

document.getElementById("saveBtn").addEventListener("click", async function(e) {
  e.preventDefault(); // 防止刷新
  const name = document.getElementById("nameInput").value;
  const response = await fetch("/api/save", {
    method: "POST",
    headers: {"Content-Type": "application/json"},
    body: JSON.stringify({ name })
  });
  const data = await response.json();
  console.log("返回数据：", data);
});

📌 优点：

  • 网页不会刷新；
  • 可以手动关闭模态框或动态更新内容。

✅ 四、解决方案三：确保按钮不是“submit”类型

有时你的按钮在 <form> 内部，如果是：

&lt;button type="submit">提交&lt;/button>

浏览器会自动提交整个表单并刷新。

✅ 改成：

&lt;button type="button" id="saveBtn">提交&lt;/button>

这样点击不会触发表单刷新。

✅ 五、解决方案四（针对框架）

🔹 Vue / React

框架默认使用虚拟 DOM 和事件代理，刷新通常是因为：

  • 表单未阻止默认行为；
  • 模态框重新渲染触发 window.location.reload() 或 router.push()。

Vue 示例：

&lt;form @submit.prevent="submitForm">
  &lt;input v-model="username" />
  &lt;button type="submit">提交&lt;/button>
&lt;/form>

@submit.prevent 会自动阻止页面刷新。

✅ 六、解决方案五：避免模态框关闭触发 reload

如果使用的是 Bootstrap 模态框，有时在隐藏/关闭时触发的事件会刷新页面。
检查是否有：

$('#myModal').on('hidden.bs.modal', function() {
  location.reload();
});

✅ 删除或注释这段代码即可。

🚀 总结

原因表现解决方案
表单默认提交点击按钮后刷新event.preventDefault()
按钮类型是 submit点击按钮刷新改成 type="button"
使用同步请求刷新整页改用 fetch / axios
模态关闭事件触发刷新模态关闭后整个页面 reload删除 location.reload() 逻辑
框架中未阻止默认提交React/Vue 中刷新使用 .prevent 或 e.preventDefault()