表单默认提交会触发页面整体刷新或跳转，无法直接将响应内容载入指定 div；正确做法是禁用原生提交，改用 fetch 或 ajax 获取数据后手动更新 dom。
表单默认提交会触发页面整体刷新或跳转，无法直接将响应内容载入指定 div；正确做法是禁用原生提交，改用 fetch 或 ajax 获取数据后手动更新 dom。
传统表单提交（form.submit()）本质上是导航行为，浏览器会将响应渲染为全新的浏览上下文（如新页面、新标签页或 iframe），而 <div> 仅是文档中的一个普通容器，不具备承载独立 HTML 文档的能力。因此，即使你在 <code>action 中添加了 #divTessera 锚点，也无法改变“整页替换”的本质——该锚点仅影响页面滚动位置，对内容加载目标毫无作用。
✅ 推荐方案：使用 fetch 替代表单提交
以下为重构后的完整示例，完全避免页面跳转，将 inc_tessera.php 的响应内容动态注入到 #divTessera 中：
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
jQuery($ => {
$('.e-chiedi').on('click', async e => {
e.preventDefault(); // ⚠️ 关键：阻止默认表单提交行为
const $btn = $(e.target);
// 弹窗确认（保留原有逻辑）
const confirmed = await new Promise(resolve => {
$.MessageBox({
buttonDone: "Si",
buttonFail: "No",
message: "Mymessage"
}).done(() => resolve(true)).fail(() => resolve(false));
});
if (!confirmed) return;
try {
// 使用 fetch 发起 POST 请求（模拟表单提交）
const formData = new FormData($('#formHome')[0]); // 若存在表单，自动收集字段
const response = await fetch('inc_tessera.php', {
method: 'POST',
body: formData
});
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const html = await response.text();
$('#divTessera')
.html(html) // 插入服务器返回的 HTML
.show(); // 显示隐藏的 div
} catch (err) {
console.error('加载失败:', err);
alert('请求失败，请检查网络或服务器状态');
}
});
});
</script>
</head>
<body>
<!-- 注意：确保存在 id="formHome" 的表单，否则 FormData 为空 -->
<form id="formHome" style="display:none;">
<!-- 示例字段（请按实际需求补充） -->
<input type="hidden" name="token" value="abc123">
</form>
<div id="divTessera" style="display: none; padding: 15px; border: 1px solid #ccc; margin-top: 10px;"></div>
<input id="x" name="x" type="button" class="e-chiedi" value="提交申请" />
</body>⚠️ 注意事项与最佳实践
-
必须调用
e.preventDefault()：这是阻止原生表单提交、避免页面跳转的前提； -
服务端需返回纯 HTML 片段或 JSON：若返回完整 HTML 页面（含
），建议服务端只输出#divTessera内容所需的片段，避免结构冲突； -
安全性提醒：动态插入 HTML 时，若内容不可信，应先清理 XSS 风险（如使用
DOMPurify.sanitize()）； -
替代方案：iframe（不推荐）：虽可通过
<iframe name="targetFrame"></iframe>+form[target="targetFrame"]实现“伪嵌入”，但 iframe 隔离性强、样式/脚本受限、SEO 友好性差，现代开发中应优先选择fetch + DOM方案； - 错误处理不可省略：网络异常、服务端报错、跨域限制等均需显式捕获并反馈用户。
通过 fetch 主动控制请求与渲染流程，你不仅能精准控制内容落点（#divTessera），还能实现加载状态提示、错误重试、平滑过渡动画等增强体验，是构建现代化 Web 应用的标准实践。
