如何防止表单提交后 URL 显示 POST 数据（避免 GET 重定向）-html教程-PHP中文网

表单默认以 get 方式提交会导致数据暴露在地址栏中；需通过 e.preventdefault() 在事件处理起始处阻止默认行为，并配合 fetch 手动发送 post 请求，确保 url 保持不变。

表单默认以 get 方式提交会导致数据暴露在地址栏中；需通过 e.preventdefault() 在事件处理起始处阻止默认行为，并配合 fetch 手动发送 post 请求，确保 url 保持不变。

在 Web 开发中，当使用

标签并点击 type="submit" 按钮时，浏览器会自动触发原生表单提交——若未显式指定 method 属性，默认为 GET，此时所有表单字段会以查询参数形式拼接到当前 URL 后（如 http://localhost:8080/clients?nom=John&nationalite=FR），造成敏感数据泄露、URL 过长、状态不可控等问题。

你遇到的问题根源正在于此：尽管你在 submit 事件回调中调用了 fetch 发起手动 POST，但 e.preventDefault() 被错误地放在了异步 .then() 内部，导致默认提交行为早已执行完毕，页面已跳转或刷新，后续的 fetch 实际上是在新页面（或失败状态）下运行，完全失去控制。

✅ 正确做法是：在 submit 事件监听器最开始就调用 e.preventDefault()，彻底阻断浏览器默认行为，再统一由 JavaScript 控制后续逻辑：

jQuery金融借款单提交表单

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

下载

$("#frmClient").on("submit", function(e) {
  e.preventDefault(); // ✅ 关键：立即阻止默认提交（GET 或 POST 刷新）

  // 表单校验（可复用原生 checkValidity）
  if (!e.target.checkValidity()) {
    return; // 校验失败，不执行后续操作，让浏览器显示原生提示
  }

  // 仅处理“新增”模式
  if ($("#frmClient #mode_").val() === "ajout") {
    createClient()
      .then(data => {
        $('#frmClient')[0].reset(); // 重置表单
        modalClient.style.display = "none"; // 关闭模态框
        // ✅ 此时 URL 仍为 http://localhost:8080/clients，无任何变化
      })
      .catch(error => {
        console.error("客户端创建失败:", error);
        // 可在此添加错误提示 UI（如 Toast 或表单内提示）
      });
  }
});

同时，请确保你的 createClient() 函数逻辑健壮，例如补充错误处理与加载状态反馈：

async function createClient() {
  const formData = $("#frmClient").serializeJSON();

  try {
    const response = await fetch($("#API_URL").val() + '/clients', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(formData)
    });

    if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }

    return await response.json();
  } catch (err) {
    throw err;
  }
}

⚠️ 注意事项：

不要混用 submit 事件和 click 事件监听同一按钮（如 #btnValiderPopupAjoutClient），除非明确解耦职责；当前 submit 事件已覆盖全部逻辑，click 中的校验可移入 submit 处理器中统一管理；
确保后端接口（如 Quarkus /clients）正确接收 application/json 并返回标准 HTTP 状态码（201 Created），前端才能准确判断成功与否；
若需兼容老旧浏览器，serializeJSON() 需引入 jquery.serializeJSON 插件；现代项目建议改用原生 FormData + Object.fromEntries() 实现序列化。

遵循以上结构，即可彻底避免地址栏被污染，实现干净、可控、符合 REST 规范的无刷新表单提交。