必须在表单submit事件处理器首行调用event.preventdefault()阻止默认行为，否则无论后续是否编写fetch或ajax代码，浏览器都会强制整页刷新或跳转；漏掉此步将导致页面“一闪”后回退至原始状态。
不拦截表单默认行为，就一定会整页刷新。所有“局部刷新”的本质，都是阻止 submit 事件的默认提交流程，再用 JS 控制数据流向和 DOM 更新位置。
必须加 event.preventDefault() 或 return false
这是最常被跳过的一步。只要没拦住，默认表单提交会触发页面跳转或重载——无论你后面写了多少 fetch 或 $.ajax，都来不及执行。
- 原生 JS：在
form.addEventListener('submit', ...)回调里第一行写event.preventDefault() - jQuery：
$('#myform').submit(function(e) { e.preventDefault(); ... })，或者直接末尾写return false; - 漏掉这步的表现：按钮点下去，“一闪”看到新内容，立刻回退到原始页面——不是后端没返回，是浏览器抢先把整个页面 reload 了
fetch 提交后怎么把结果塞进指定 <div>
<p>目标容器必须有明确 <code>id，比如 <div id="result-area"></div>；后端返回内容也得匹配这个用途。
- 后端应返回纯 HTML 片段（不含
<p>提交成功！邮箱已更新</p>
- 前端拿到响应后，不能只写
fetch(...).then(r => r.text())，必须手动赋值：document.getElementById('result-area').innerHTML = html
- 若后端返回 JSON（更推荐），需先解析再拼接：
data.message 插入 innerHTML，或用 textContent 防 XSS
- 常见报错
Cannot set property 'innerHTML' of null：说明 getElementById 没找到元素——检查 ID 拼写、脚本是否在 DOM 加载完后执行（放 DOMContentLoaded）
用 iframe 方案时，name 和 target 必须完全一致
<p>提交成功！邮箱已更新</p>
fetch(...).then(r => r.text())，必须手动赋值：document.getElementById('result-area').innerHTML = html
data.message 插入 innerHTML，或用 textContent 防 XSSCannot set property 'innerHTML' of null：说明 getElementById 没找到元素——检查 ID 拼写、脚本是否在 DOM 加载完后执行（放 DOMContentLoaded）iframe 方案时，name 和 target 必须完全一致这是 iframe 局部刷新唯一依赖的机制，大小写、空格、引号全算数。它不走 JS，但对属性匹配极其敏感。
- 写法必须是：
<iframe name="form-output"></iframe>+ 表单里<form target="form-output"></form> -
target认的是name，不是id；写成target="form-output-frame"却定义name="form-output"就失效 - 优点：零 JS、兼容性极好、文件上传天然支持；缺点：子页 JS 无法直接操作父页 DOM，跨域时需
postMessage - 刷新后回到首页？因为 F5 重载父页时 iframe 会恢复初始
src。要持久化，得在子页beforeunload存localStorage，父页加载时读取并重设iframe.src
真正难的不是选哪种技术，而是每种方案下那个“刚好卡住你半天”的细节：preventDefault 忘了加、target 多了个空格、后端多返回了一层 、容器 ID 拼错一个字母……这些地方一错，表面看全是“没反应”，实际原因各不相同。
