最轻量方案是fetch+innerHTML更新DOM，需preventDefault()、后端返回HTML片段并注意XSS；PHP服务端渲染适合SEO和无JS环境；formtarget="_blank"和PDF预览失败多因非用户手势同步触发。
表单提交后不刷新页面，用 fetch + innerHTML 更新内容
直接改 DOM 是最轻量、响应最快的方案，适合结果结构固定、无需 SEO 的场景。关键不是“能不能显示”，而是“怎么让 JS 拿到服务端返回的 HTML 片段”。
- 表单必须用
event.preventDefault()阻止默认提交，否则整页跳转 - 后端接口（如
/api/submit）需返回纯 HTML 字符串或 JSON 包含html字段，不能返回完整页面 - 前端用
fetch()发送数据，成功后把响应写入目标容器：document.getElementById('result').innerHTML = data.html - 注意 XSS 风险：如果后端返回的是用户可控内容（比如评论），别直接
innerHTML，改用textContent或 DOMPurify 过滤
PHP 服务端渲染时控制 div 显示/隐藏
适合需要 SEO、兼容无 JS 环境、或结果依赖服务端逻辑（如权限校验、数据库查询）的场景。核心是“提交即重载，PHP 决定该画什么”。
- 表单
method="POST"提交到当前 PHP 文件（如index.php） - 在 PHP 开头检测是否提交：
if ($_SERVER['REQUEST_METHOD'] === 'POST' && !empty($_POST['submit'])) { $showResult = true; } - HTML 中用 PHP 条件包裹结果区域：...
- 不要用
display: none+ JS 切换——那只是“藏起来”，页面加载时它仍存在，且无 JS 就永远看不见
formtarget="_blank" 动态切窗口但结果打不开？检查这三点
这不是代码写错了，而是浏览器策略卡住了。常见于 Safari 和 iOS WebView，且无报错提示，容易误判为 JS 未执行。
-
formtarget只对type="submit"有效，普通即使加了formtarget属性也会被忽略 - 目标窗口被拦截的主因是：提交动作不在用户直接点击的同步上下文中。例如你在
fetch().then(() => form.submit())里触发，Safari 就会静默拦截_blank - 正确做法是：按钮保持原生
type="submit"，用 JS 监听change或click事件，立刻调用element.setAttribute('formtarget', '_blank')，然后让用户自己点提交
提交后生成 PDF 合同却只下载不展示？问题出在响应头和前端处理
浏览器看到 Content-Type: application/pdf 且没带 Content-Disposition: inline，就会默认下载。想在页面内预览，得主动干预。
- 后端必须设置响应头：
Content-Type: application/pdf+Content-Disposition: inline; filename="contract.pdf" - 前端不能用
window.open(blobUrl)—— 新标签页可能被拦截；推荐插入到页面指定区域 - 大文件（>5MB）慎用 blob URL：iOS Safari 容易崩溃，建议后端返回临时可访问的 PDF URL，前端用
- 别用 jsPDF 前端拼合同：中文换行错乱、页眉页脚缺失、法务不认——生成环节必须由服务端完成
实际中最容易被忽略的，是「提交行为是否发生在用户手势的同步链路中」。哪怕只多包一层 setTimeout(() => form.submit(), 0)，Safari 就可能拒绝打开新窗口或预览 PDF。这个限制不报错、不警告，只静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
