求助：无法通过JavaScript与AJAX控制表单提交按钮Spinner的显隐

核心问题分析 #

你当前代码的主要问题是：调用$('#submitButton').text('Sending Message')时，会完全替换按钮内部的所有内容，包括原本的Spinner <span> 元素，导致Spinner被删除，自然无法显示。

另外，现有代码仅处理了AJAX请求成功的情况，未处理请求失败（如网络错误、服务器错误）的场景，会导致Spinner一直停留在页面上。

具体修复方案 #

步骤1：修改HTML结构，拆分文本与Spinner #

把按钮内的文本放到单独的<span>中，避免替换文本时删除Spinner：

<div class="d-flex justify-content-center">
  <button class="btn btn-medium btn-fancy btn-primary mb-0 ls-wider" type="submit" id="submitButton">
    <span class="submitSpinner spinner-border spinner-border-sm me-1 d-none"></span>
    <span class="btn-text">Send Message</span>
  </button>
</div>

这里直接给Spinner加上d-none类（Bootstrap内置的隐藏类），替代JS初始隐藏的逻辑。

步骤2：修改AJAX代码，修复文本替换与完善错误处理 #

$(document).ready(function() {
  $("#contact-form").submit(function(e) {
    e.preventDefault();
    const $submitBtn = $('#submitButton');
    const $spinner = $('.submitSpinner');
    const $btnText = $('.btn-text');

    // 显示Spinner，修改按钮文本，禁用按钮防止重复提交
    $spinner.removeClass('d-none');
    $btnText.text('Sending Message');
    $submitBtn.prop('disabled', true);

    var data = {
      'name': $('#name').val(),
      'email': $('#email').val(),
      'phone': $('#phone').val(),
      'company': $('#company').val(),
      'message': $('#message').val(),
    }
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });
    $.ajax({
      type: "POST",
      url: "/contact/message/send",
      data: data,
      dataType: "json",
      success: function(response) {
        if (response.status == 400) {
          $.each(response.errors, function(key, error) {
            $('#contact-alerts').append('<div class="col-12 col-md-9 col-lg-7 alert alert-danger alert-dismissible fade in show" role="alert"><button type="button" class="btn-close line-height-unset" data-bs-dismiss="alert" aria-label="Close"></button>' + error + '</div>')
          });
        } else {
          $("#contact-form")[0].reset();
          $.magnificPopup.open({
            showCloseBtn: true,
            items: {
              src: '#contact-success'
            },
            type: 'inline',
            fixedContentPos: false,
            fixedBgPos: true,
            overflowY: 'auto',
            closeBtnInside: true,
            preloader: false,
            midClick: true,
            removalDelay: 300,
            blackbg: true,
            mainClass: 'my-mfp-slide-bottom',
          });
        }
      },
      // 处理请求失败的情况
      error: function() {
        $('#contact-alerts').append('<div class="col-12 col-md-9 col-lg-7 alert alert-danger alert-dismissible fade in show" role="alert"><button type="button" class="btn-close line-height-unset" data-bs-dismiss="alert" aria-label="Close"></button>提交失败，请稍后重试</div>');
      },
      // 无论成功/失败，都会执行的回调
      complete: function() {
        // 隐藏Spinner，恢复按钮文本与可点击状态
        $spinner.addClass('d-none');
        $btnText.text('Send Message');
        $submitBtn.prop('disabled', false);
      }
    });
  });
});

关键优化点说明 #

• 拆分按钮内的文本与Spinner元素，避免替换文本时删除Spinner
• 使用Bootstrap的d-none类控制显示隐藏，更符合框架规范，避免直接操作CSS
• 新增complete回调，确保无论请求成功或失败，都会隐藏Spinner、恢复按钮状态
• 提交时禁用按钮，防止用户重复点击提交
• 新增error回调，处理网络错误等异常情况，给用户提示

内容的提问来源于stack exchange，提问作者Ajinkya More