表单默认以 get 方式提交会导致数据暴露在地址栏中；需通过 e.preventdefault() 在事件处理起始处阻止默认行为，并配合 fetch 手动发送 post 请求，确保 url 保持不变。
表单默认以 get 方式提交会导致数据暴露在地址栏中；需通过 e.preventdefault() 在事件处理起始处阻止默认行为，并配合 fetch 手动发送 post 请求，确保 url 保持不变。
在 Web 开发中，当使用 <form> 标签并点击 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 控制后续逻辑：
$("#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 规范的无刷新表单提交。
