禁用按钮并替换文字为“保存中...”或内嵌Spinner是最简单可靠的防重复提交方案，需在AJAX的always或finally中统一恢复按钮状态，同时保留原始innerHTML结构。
Modal 保存按钮点击后禁用并显示 Loading 状态
直接禁用按钮 + 替换文字是最简单可靠的做法，避免用户重复提交，也符合 bootstrap 的交互预期。关键不是加动画，而是阻断二次点击。
- 用
btn.disabled禁用按钮本身，比仅靠 CSS 遮罩更稳妥（防止键盘回车或 focus 触发） - 把按钮内文字替换成
保存中...或带的 HTML 片段 - 务必在 AJAX 成功/失败回调里恢复按钮状态，否则 Modal 关闭后按钮仍被锁住
- 不要只改
textContent，要保留原始 innerHTML（含图标、span等），否则可能丢失样式结构
使用 Bootstrap 5 的 Spinner 内嵌到按钮中
Bootstrap 5 自带的 spinner-border 可以直接塞进按钮，但需注意尺寸和对齐。默认是 inline 元素，容易换行或错位。
- 给按钮加
position: relative（或用btn-sm配合spinner-border-sm） - 推荐写法：
- 如果按钮原本有图标（如 Font Awesome），记得在加载态移除图标，只留 spinner + 文字，避免堆叠
-
me-1是 Bootstrap 5 的 margin 工具类，确保 spinner 和文字之间有空隙；旧版用mr-1
AJAX 提交后没恢复按钮状态的常见原因
最常踩的坑不是“怎么加 loading”，而是“怎么关掉”。很多代码只在 success 回调里恢复按钮，却忽略了 error 或 always 分支。
- 用
$.ajax().always()或fetch().finally()统一恢复，而不是只在then()里做 - 恢复时别只改文字，要同时移除
disabled属性、清空 spinner HTML（或用data-original-text存原始内容） - 如果 Modal 是动态生成的（比如从模板 clone），按钮 DOM 可能被重建，此时用事件委托或绑定在父容器上会失效
- Vue/React 项目里，直接操作 DOM 改按钮状态容易和响应式脱节，优先用
v-if/useState控制渲染
Modal 多个表单共用一个保存按钮时的状态管理
一个 Modal 里有多个 tab 或步骤，每个步骤都有自己的表单和保存逻辑，但按钮只有一个 —— 这时不能只靠按钮 DOM 属性判断当前状态。
- 用一个变量（如
currentStep）或 data 属性（如data-step="2"）标记当前激活的表单 - 点击保存前先校验
currentStep对应的表单有效性，再决定调哪个 API - 不同步骤的 loading 状态可以复用同一个按钮，但 success 提示要差异化（比如“基础信息已保存” vs “上传完成”）
- 别在按钮上硬编码所有步骤的文案，用对象映射：
{ step1: '保存基础信息', step2: '提交附件' }
实际最难处理的是异步嵌套：比如保存后要立即触发另一个接口（如生成预览），又或者 Modal 关闭逻辑依赖两个请求都完成。这种时候 loading 状态得跨请求维持，光靠单个按钮的 disabled 不够，得配合全局 pending 标志或 Promise.all。
