jQuery的$.ajax除success外能否添加failure处理？附代码问题

在jQuery的$.ajax中，有几种常用的方式来添加失败处理逻辑，我先给你讲清楚，再帮你排查之前按钮失效的可能原因~

方法1：直接在$.ajax配置里加error回调 #

这是比较传统的写法，适合所有支持$.ajax的jQuery版本。error回调会在请求失败时触发，它接收三个参数：

• jqXHR：请求的XMLHttpRequest对象
• textStatus：错误状态（比如"timeout"、"error"、"abort"等）
• errorThrown：抛出的错误信息（如果有的话）

修改你的代码如下：

$('#signUpSubmit').click(function() {
    var email = document.getElementById('signUpEmail').value;
    var password = document.getElementById('signUpPassword').value;
    $.ajax({
        url: 'signup.php',
        type: 'POST',
        data: { email: email, password: password },
        success: function() {
            alert('Email Sent');
        },
        error: function(jqXHR, textStatus, errorThrown) {
            // 这里写失败后的处理逻辑
            alert('请求失败：' + textStatus + '，错误信息：' + errorThrown);
            console.log('请求详情：', jqXHR);
        }
    });
});

方法2：用链式调用的.fail()方法 #

这种写法更符合现代Promise的风格，$.ajax返回的是一个Deferred对象，你可以链式调用.fail()来绑定失败回调：

$('#signUpSubmit').click(function() {
    var email = document.getElementById('signUpEmail').value;
    var password = document.getElementById('signUpPassword').value;
    $.ajax({
        url: 'signup.php',
        type: 'POST',
        data: { email: email, password: password }
    })
    .done(function() { // 这里的done等价于success回调
        alert('Email Sent');
    })
    .fail(function(jqXHR, textStatus, errorThrown) {
        alert('请求失败：' + textStatus);
        console.error(errorThrown);
    });
});

为啥你之前添加后按钮失效？ #

很大概率是语法错误导致的！比如你在加error回调的时候，忘记在success的大括号后面加逗号，或者回调函数里有语法错误（比如少了括号、引号不匹配）。这种情况下浏览器的JS控制台会报错，导致整个点击事件的代码无法执行，按钮就“失效”了。

建议你打开浏览器的开发者工具（按F12），切换到Console标签页，看看有没有红色的错误提示，根据提示修复语法问题就好啦~

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