在 asp.net mvc 的 ajax 表单提交中，若用户多次点击提交按钮，会导致 sweetalert 错误提示（如“employee exist before”）重复弹出。根本原因是事件监听未解绑且按钮未禁用，造成多个并发请求触发多次回调。解决方案是提交时禁用按钮，并在请求结束后统一恢复状态。
在 asp.net mvc 的 ajax 表单提交中，若用户多次点击提交按钮，会导致 sweetalert 错误提示（如“employee exist before”）重复弹出。根本原因是事件监听未解绑且按钮未禁用，造成多个并发请求触发多次回调。解决方案是提交时禁用按钮，并在请求结束后统一恢复状态。
该问题并非服务端逻辑缺陷（后端 RequesterIndex 方法已正确校验并返回唯一响应），而是前端事件处理不严谨所致：每次点击提交按钮都会为 #ResignationApp 表单重新绑定 .submit() 事件（尤其在动态重载或脚本重复执行时），同时未阻止用户重复触发，导致多个 $.ajax() 请求并发执行，每个请求的 success 回调均独立调用 Swal.fire()，从而出现提示叠加。
✅ 正确做法是一次性绑定事件 + 提交期间禁用按钮 + 统一收口恢复状态。以下是优化后的完整实现：
// ✅ 推荐：使用委托绑定（防重复绑定），并精确控制按钮状态
$(document).ready(function () {
const $form = $("#ResignationApp");
const $submitBtn = $("#btnsubmit"); // 确保选择器匹配实际按钮 ID
$form.on("submit", function (e) {
e.preventDefault();
// ? 提交前立即禁用按钮，防止重复点击
$submitBtn.prop("disabled", true).text("Submitting...");
const formData = $(this).serialize();
console.log("Form data:", formData);
$.ajax({
type: "POST",
dataType: "json",
url: '@Url.Action("RequesterIndex", "Resignation")',
data: formData,
timeout: 10000 // 可选：添加超时避免长期挂起
})
.done(function (response) {
let success = false;
let message = "";
for (let item of response) {
if (item.Key === "success") success = item.Value;
if (item.Key === "message") message = item.Value;
}
if (success) {
Swal.fire({
icon: "success",
title: "Submission Request",
text: message
}).then((result) => {
if (result.isConfirmed) {
const url = '@Url.Action("IndexResignation", "Home")' + '?filenumber=' + empidval;
window.open(url, '_self');
}
});
} else {
// ❗ 关键：仅对明确业务错误（如员工已存在）显示定制提示
const errorMsg = message === "Employee Exist Before"
? "Employee Exist Before"
: message || "An error occurred. Please try again.";
Swal.fire({
icon: "error",
title: "Resignation Submission Form",
text: errorMsg
});
}
})
.fail(function (xhr, status, error) {
let errorMsg = "Network error or server unavailable.";
if (status === "timeout") errorMsg = "Request timed out. Please check your connection.";
Swal.fire("Error", errorMsg, "error");
})
.always(function () {
// ✅ 无论成功/失败/超时，都恢复按钮状态
$submitBtn.prop("disabled", false).text("Submit"); // 恢复原始文字
});
});
});
? 关键注意事项：
-
避免重复绑定：使用
$(document).ready()包裹，并采用on("submit", ...)委托方式，而非直接submit(function(){})，防止页面局部刷新后重复绑定事件； -
禁用范围精准：确保
#btnsubmit选择器与 HTML 中按钮id完全一致（检查是否误写为id="submitBtn"或缺少 ID）； -
.always()不可省略：它保证按钮在任何情况下（包括网络异常、超时、服务端 500）都能恢复可用，否则用户将永久无法操作； -
增强用户体验：按钮文字临时改为
"Submitting..."并配合 CSS 加载动画（如:disabled::after插入 spinner），能显著降低用户重复点击意愿； -
服务端兜底（推荐）：虽非必需，但可在 Controller 中增加幂等性校验（如基于
EmpID + Timestamp的 Redis 缓存锁），实现双重防护。
通过以上改进，即可彻底解决 SweetAlert 多次弹窗问题，确保每个用户操作仅触发一次 UI 反馈，符合 Web 应用健壮性与用户体验最佳实践。
