表单提交按钮点击后应立即禁用并替换文字为“提交中…”或添加加载图标，防止重复提交；需通过JavaScript阻止默认行为、发起异步请求，并在完成后恢复按钮状态。
表单提交按钮在点击后显示加载状态，核心是“禁用按钮 + 替换文字/添加加载图标”，同时防止重复提交。关键不在 HTML 本身，而在配合 JavaScript 控制按钮状态。
禁用按钮并修改文字
用户点击后立即禁用按钮、改变文字，是最简单直接的方式：
- 用 disabled 属性阻止再次点击
- 把按钮文字（如“提交”）临时改为“提交中…”或“正在处理”
- 请求完成（无论成功或失败）后恢复按钮状态和文字
示例代码：
<form id="myForm"><input type="text" name="email" required>
<button type="submit">提交</button>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(e) {
const btn = e.target.querySelector('button[type="submit"]');
btn.disabled = true;
btn.textContent = '提交中...';
// 模拟异步提交
fetch('/api/submit', {
method: 'POST',
body: new FormData(e.target)
})
.then(() => alert('提交成功'))
.catch(() => alert('提交失败'))
.finally(() => {
btn.disabled = false;
btn.textContent = '提交';
});
});
</script>
添加 SVG 或 CSS 加载图标
纯文字不够直观，可内联一个简易旋转图标提升体验：
立即学习“前端免费学习笔记（深入）”；
- 初始按钮里嵌入一个隐藏的 <span class="loading"> 或 SVG
- 提交时显示图标、隐藏文字；完成后反之
- 用 CSS 实现旋转动画（例如 animation: spin 1s linear infinite）
小技巧：图标 SVG 可以直接写在 HTML 中，避免额外请求。
避免仅靠 CSS :disabled 样式变化
仅设置 button:disabled { opacity: 0.6; } 不够 —— 用户可能误以为卡住而狂点。必须配合 JS 禁用 + 明确反馈（文字/图标），否则体验断裂。
注意表单默认行为与防重复提交
如果没阻止表单默认提交（e.preventDefault()），页面会跳转或刷新，JS 状态控制就失效了。务必在监听 submit 事件时调用 e.preventDefault()，再手动发起 fetch / axios 请求。
