如何在提交按钮点击后显示FontAwesome加载Spinner并正常提交表单

点击提交按钮后，浏览器会立即触发表单提交并刷新页面，此时Spinner的DOM更新操作还没来得及完成渲染，就被页面刷新覆盖了，所以看不到Spinner。返回false会阻止表单提交，页面不刷新，Spinner能正常显示，但表单也无法完成提交流程。

通过阻止默认表单提交行为，改用AJAX异步提交表单，这样页面不会刷新，Spinner能正常显示，同时表单提交逻辑也能正常执行。具体步骤如下：

1. 给表单添加ID（方便选择器定位）
2. 监听表单的submit事件而非按钮的click事件（更符合表单交互逻辑）
3. 阻止默认提交行为，显示Spinner并隐藏原图标
4. 禁用按钮防止重复提交
5. 用AJAX提交表单数据，根据提交结果处理按钮状态

修改后的代码 #

HTML部分 #

<form id="submitForm" action="/your-submit-url" method="POST">
  <button type="submit" class="btn btn-primary">
    <i class="fas fa-spinner fa-spin" style="display:none;"></i> 
    <i class="fa-solid fa-file-code"></i> HTML
  </button>
</form>

jQuery部分 #

$("#submitForm").submit(function(event) {
  // 阻止浏览器默认的表单提交刷新行为
  event.preventDefault();

  const $form = $(this);
  const $submitBtn = $form.find(".btn");
  const $spinner = $submitBtn.find(".fa-spinner");
  const $originalIcon = $submitBtn.find(".fa-file-code");

  // 显示Spinner，隐藏原图标
  $spinner.show();
  $originalIcon.hide();
  // 禁用按钮，防止重复点击提交
  $submitBtn.prop("disabled", true);

  // 异步提交表单数据
  $.ajax({
    url: $form.attr("action"),
    method: $form.attr("method"),
    data: $form.serialize(), // 序列化表单数据
    success: function(response) {
      // 提交成功后的操作：比如跳转到成功页面
      window.location.href = "/success";
    },
    error: function(xhr) {
      // 提交失败后的操作：恢复按钮状态，提示错误
      $spinner.hide();
      $originalIcon.show();
      $submitBtn.prop("disabled", false);
      alert("提交失败，请检查后重试");
    }
  });
});

• 无需手动设置style="display:inline-block;"，jQuery的.show()方法会根据元素类型自动设置合适的display值
• 监听表单submit事件比按钮click事件更严谨，能覆盖回车键提交等场景
• 如果必须使用传统表单提交（不使用AJAX），可以尝试用setTimeout延迟提交，但这种方式不可靠（依赖渲染速度），不推荐：

$(".btn").click(function(event) {
  $(this).find(".fa-spinner").show();
  $(this).find(".fa-file-code").hide();
  // 延迟100ms再提交，给Spinner渲染时间
  setTimeout(() => {
    $(this).closest("form").submit();
  }, 100);
  return false;
});

内容的提问来源于stack exchange，提问作者Jen Mankin