表单默认提交会触发页面整体刷新或跳转，无法直接将响应内容载入指定 div；正确做法是禁用原生提交，改用 fetch 或 ajax 获取数据后手动更新 dom。

表单默认提交会触发页面整体刷新或跳转，无法直接将响应内容载入指定 div；正确做法是禁用原生提交，改用 fetch 或 ajax 获取数据后手动更新 dom。

传统表单提交（form.submit()）本质上是导航行为，浏览器会将响应渲染为全新的浏览上下文（如新页面、新标签页或 iframe），而

仅是文档中的一个普通容器，不具备承载独立 HTML 文档的能力。因此，即使你在 action 中添加了 #divTessera 锚点，也无法改变“整页替换”的本质——该锚点仅影响页面滚动位置，对内容加载目标毫无作用。

✅ 推荐方案：使用 fetch 替代表单提交

以下为重构后的完整示例，完全避免页面跳转，将 inc_tessera.php 的响应内容动态注入到 #divTessera 中：

  <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><!-- 注意：确保存在 id="formHome" 的表单，否则 FormData 为空 -->

⚠️ 注意事项与最佳实践

• 必须调用 e.preventDefault()：这是阻止原生表单提交、避免页面跳转的前提；
• 服务端需返回纯 HTML 片段或 JSON：若返回完整 HTML 页面（含 ），建议服务端只输出 #divTessera 内容所需的片段，避免结构冲突；
• 安全性提醒：动态插入 HTML 时，若内容不可信，应先清理 XSS 风险（如使用 DOMPurify.sanitize()）；
• 替代方案：iframe（不推荐）：虽可通过 + form[target="targetFrame"] 实现“伪嵌入”，但 iframe 隔离性强、样式/脚本受限、SEO 友好性差，现代开发中应优先选择 fetch + DOM 方案；
• 错误处理不可省略：网络异常、服务端报错、跨域限制等均需显式捕获并反馈用户。

通过 fetch 主动控制请求与渲染流程，你不仅能精准控制内容落点（#divTessera），还能实现加载状态提示、错误重试、平滑过渡动画等增强体验，是构建现代化 Web 应用的标准实践。


jQuery金融借款单提交表单
jQuery金融借款单提交表单，包含出借金额和日期的选择，且自动计算利息，非常的简单方便。
下载