jQuery Ajax调用中提交按钮动画函数失效问题求助

先梳理下你代码里的几个核心问题，这些大概率就是导致动画不工作的原因：

1. 未定义变量的低级错误 #

你在else分支里用了submitBtnTxt，但这个变量根本没定义——你的函数参数明明是defaultText，这里应该替换成传入的defaultText才对。

2. 按钮禁用逻辑完全搞反了 #

当doSubmit == true（也就是提交进行中），我们应该禁用按钮防止用户重复点击，而不是移除disabled类；反过来，提交完成后才应该移除禁用状态，恢复按钮的默认文本。

3. Ajax调用时机没配对 #

你需要把这个状态切换函数绑定到Ajax请求的正确阶段：

• 请求发起前（beforeSend）：调用函数显示加载动画
• 请求完成后（不管成功/失败，用complete）：调用函数恢复按钮状态

修正后的状态切换函数 #

function displaySubmitting(submitBtn, defaultText, doSubmit){
    if (doSubmit === true){
        // 提交中：禁用按钮+显示加载动画
        submitBtn.addClass("disabled");
        submitBtn.html("<i class='fa fa-spin fa-spinner'></i> Searching...");
    } else {
        // 提交完成：恢复按钮状态+默认文本
        submitBtn.removeClass("disabled");
        submitBtn.html(defaultText);
    }
}

完整的Ajax调用示例 #

结合你给出的变量定义，完整的调用代码应该是这样的：

var $contactForm = $(".contact-form");
var contactFormMethod = $contactForm.attr("method");
var contactFormEndpoint = $contactForm.attr("action"); // 补全你未写完的端点变量
var $submitBtn = $contactForm.find("button[type='submit']"); // 定位提交按钮
var defaultBtnText = $submitBtn.html(); // 提前保存按钮的默认文本

$contactForm.on("submit", function(e){
    e.preventDefault(); // 阻止表单默认跳转提交
    
    // 发起请求前，切换到加载状态
    displaySubmitting($submitBtn, defaultBtnText, true);

    $.ajax({
        url: contactFormEndpoint,
        method: contactFormMethod,
        data: $contactForm.serialize(),
        success: function(response){
            // 这里写提交成功后的逻辑，比如提示用户
            console.log("提交成功:", response);
        },
        error: function(xhr, status, error){
            // 这里写提交失败后的逻辑，比如提示错误
            console.error("提交失败:", error);
        },
        complete: function(){
            // 不管成功失败，最后都恢复按钮状态
            displaySubmitting($submitBtn, defaultBtnText, false);
        }
    });
});

额外提醒 #

• 确保你已经正确引入了Font Awesome，不然加载图标会显示不出来
• 如果你的disabled类样式没完全禁用点击，可以在添加类的同时加上submitBtn.prop("disabled", true)，双重保险

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