表单默认以 get 方式提交会导致数据拼接在 url 中，而未及时调用 e.preventdefault() 是根本原因；正确做法是在事件处理函数最开始就阻止默认行为，并配合 fetch 手动发送 post 请求。
表单默认以 get 方式提交会导致数据拼接在 url 中，而未及时调用 e.preventdefault() 是根本原因；正确做法是在事件处理函数最开始就阻止默认行为，并配合 fetch 手动发送 post 请求。
在 Web 开发中，当使用 <form> 标签并点击 type="submit" 按钮时，浏览器会自动触发原生表单提交——若未显式指定 method="POST"，则默认为 GET；即使指定了 POST，若未阻止默认行为，部分浏览器或框架仍可能回退到 GET 行为，导致所有表单字段以查询参数形式出现在地址栏（如 http://localhost:8080/clients?nom=John&nationalite=FR...），这不仅泄露敏感信息，也破坏单页应用（SPA）的路由体验。
✅ 正确解决方案：立即阻止默认提交
关键在于 e.preventDefault() 必须置于事件处理函数的最顶层，而非异步回调内部。原代码中将其放在 createClient().then(...) 内部，此时表单早已完成默认提交（页面跳转或 URL 重写），preventDefault() 已失效。
修正后的 JavaScript 逻辑如下：
$("#frmClient").on("submit", function(e) {
e.preventDefault(); // ✅ 立即阻止默认提交行为（核心修复）
// 表单校验（客户端基础验证）
if (!e.target.checkValidity()) {
return; // 校验失败，不执行后续操作
}
// 区分操作模式（新增/编辑）
const mode = $("#frmClient #mode_").val();
if (mode === "ajout") {
createClient()
.then(data => {
$('#frmClient')[0].reset(); // 重置表单
modalClient.style.display = "none"; // 关闭模态框
// ✅ 此处无需再 preventDefault —— 已在开头拦截
})
.catch(error => {
console.error("Client creation failed:", error);
alert("创建客户失败，请检查网络或输入格式。");
});
}
});
async function createClient() {
const formData = $("#frmClient").serializeJSON(); // 需确保引入 jquery.serializeJSON 插件
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 response.json();
}⚠️ 注意事项与最佳实践
- serializeJSON() 依赖插件：确保已引入 jquery.serializeJSON（原生 jQuery 不支持该方法）；
- 服务端兼容性：Spring Boot / Quarkus 的 @POST 接口已正确定义 @Consumes(MediaType.APPLICATION_JSON)（虽然示例中未显式写出，但 @Produces 不影响接收），确保能正确反序列化 JSON；
- 错误处理增强：建议在 fetch 后增加 HTTP 状态码判断（如上所示），避免 2xx 以外响应被误认为成功；
- 重复提交防护：可在点击后禁用提交按钮（如 $(this).prop('disabled', true)），并在请求完成后恢复，防止用户多次点击；
- CSRF 安全：若后端启用 CSRF 保护（如 Spring Security），需在 fetch 请求头中携带 X-XSRF-TOKEN（通常从 cookie 或 meta 标签读取）。
通过以上调整，表单将完全脱离传统提交机制，全程由 JavaScript 控制，URL 始终保持为 http://localhost:8080/clients，既保障用户体验，又符合现代前端工程规范。
