使用jQuery在AJAX请求前后更新按钮文本异常问题排查

问题根源 #

你代码里的核心问题是AJAX配置中的async: false，这个参数会强制AJAX同步执行，直接阻塞浏览器的UI渲染线程。虽然控制台日志能即时输出（console操作不依赖渲染线程），但按钮文本的DOM更新必须等待主线程空闲——而同步AJAX会一直占用主线程直到请求完成，导致按钮文本要等请求结束才会变化。

修复方案 #

1. 移除async: false，保持AJAX默认的异步模式（同步AJAX已被现代浏览器标记为不推荐，会导致页面假死）
2. 直接在SignIn函数开头更新按钮文本，无需依赖ajaxStart事件，更直观可控
3. 在AJAX的complete回调中统一恢复按钮文本，确保请求无论成功/失败都能还原状态

修改后的完整代码 #

HTML部分（无需改动）

<form id="loginForm" class="needs-validation" method="post" onsubmit="return false" novalidate>
   <div class="mb-3">
        <label class="form-label">Username</label>
        <input type="text" class="form-control rounded-pill" asp-for="Email" placeholder="Enter email" required>
    </div>

    <div class="mb-3">
        <label class="form-label">Password</label>
        <div class="position-relative auth-pass-inputgroup mb-3">
            <input type="password" class="form-control pe-5 password-input rounded-pill" asp-for="Password" placeholder="Enter password" required>                                                
        </div>
    </div>

    <div class="custom-control custom-switch custom-switch-square custom-control-success mb-2">                                             
    </div>

    <div class="mt-4">
        <button type="submit" class="btn btn-orange w-100 rounded-pill" onclick="SignIn()" id="btnSignIn">Sign In</button>
    </div>

    <div class="float-end">
        <a href="/Home/ForgottenPassword" class="text-muted">Forgot password?</a>
    </div>
</form>

JavaScript部分

async function SignIn() {
    const $btn = $("#btnSignIn");
    // 立即更新按钮文本并禁用，防止重复提交
    $btn.html("Logging in...").prop("disabled", true);

    const valdata = $("#loginForm").serialize();

    try {
        const response = await $.ajax({
            type: "POST",
            url: "/Home/LoginSubmitJson",
            contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
            dataType: "json",
            data: valdata
            // 移除async: false，保持默认异步模式
        });

        if (response.success) {
            window.location.href = '/Dashboard/Index';
        } else {
            Toastify({ text: "登录时发生错误。", duration: 1000, className: "bg-danger" }).showToast();
        }
    } catch (error) {
        Toastify({ text: "请求错误", duration: 1000, className: "bg-danger" }).showToast();
    } finally {
        // 无论请求成功或失败，都恢复按钮状态
        $btn.html("Sign In").prop("disabled", false);
    }
};

// 可移除原ajax事件监听，已通过手动方式控制按钮状态
// $(document).on("ajaxStart", function () { ... });
// $(document).on("ajaxComplete", function () { ... });
// $(document).on("ajaxError", function () { ... });

额外优化说明 #

• 添加disabled属性避免用户重复点击提交，提升交互体验
• 使用try/catch/finally结构统一处理请求结果，代码逻辑更健壮
• 移除了冗余的failure回调（jQuery AJAX无该参数，仅支持error）

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