Javascript 为ajax请求编写jQuery回调

我有三个ajax请求。第二个只能在第一个之后发射，第三个可以在第二个之后发射

目前，我正在同时编写所有三个ajax请求

$("#button-1").click(function() {
    $.ajax({
        //something
        success: function(response) {
             $("#content").html(response); 
        },
    });
});
$("#content").ready(function(){
$("#button-2").click(function() {
    $.ajax({
        //something
    });
});});
$("#content").ready(function(){
$("#button-3").click(function() {
    $.ajax({
        //something
    });
});});

如何使用回调更好地构造上面的js代码，并将每个ajax请求封装到单独的函数中？

---

我看过很多这样的帖子，但找不到可靠的方法。即使可以发布任何教程/博客/SO帖子也很好。

IMHO，他们的方法是延迟button2和button3之类的事件处理程序注册

jQuery(function () {
    function ajax1() {
        return $.ajax({
            success: function (response) {},
        });
    }

    function ajax2() {
        return $.ajax({
            success: function (response) {},
        });
    }

    function ajax3() {
        return $.ajax({
            success: function (response) {},
        });
    }

    $("#button-1").click(function () {
        ajax1().done(function () {
            $("#button-2").click(function () {
                ajax2().done(function () {
                    $("#button-3").click(ajax3)
                })
            })
        })
    });
});

更新：一个稍微不同的版本

jQuery(function () {
    function ajax1() {
        return $.ajax({
            success: function (response) {
                //something
                $("#button-2").click(ajax2)
            }
        });
    }

    function ajax2() {
        return $.ajax({
            success: function (response) {
                //something
                $("#button-3").click(ajax3);
            }
        });
    }

    function ajax3() {
        return $.ajax({
            success: function (response) {
                //something
            }
        });
    }

    $("#button-1").click(ajax1);
});

例如：

function ajaxCall(url, task, sucess, failure)
{
    $.ajax({
        type: "POST",
        url: url,
        data: {task: task},
        dataType: "json",
        success: function(result){ if(success){success(result);}},
        failure: function(result){ if(failure){failure(result);}},
    });
}

用法：

ajaxCall('getData.php','getMenu',function(response) {
             $("#content").html(response); 
        },function(response){
            alert(response);
        });

或：

---

在ajax的成功回调中使用一个布尔变量怎么样

var isFirstFired = false;
var isSecondFired = false;

下面是button-1的成功回调

$("#button-1").click(function() {
    $.ajax({
        //something
        success: function(response) {
             $("#content").html(response); 
             isFirstFired  = true;
        },
    });
});

然后在第二个按钮中单击，检查它

if (isFirstFired) {
   $.ajax({
        //something
        isSecondFired = true;
    });
}
else {
  alert("button 1 ajax is not fired");
}

第三个按钮类似

if (isSecondFired ) {
   $.ajax({
        //something            
    });
}
else {
  alert("button 2 ajax is not fired");
}

您可以这样做（非常接近您所尝试的）：

---

也就是说，我想你应该使用

.one（'click'，function

）而不是

。click（功能

以防止再次触发ajax调用。

因此，如果在按钮1之前单击按钮3，则ajax请求不应被触发fired@ArunPJohny：是的，无法触发。只有在第二个响应返回后才能触发第三个请求。请使用为您执行此操作的库。我想到了caolan/async和kriskowal/q。同意。但是，摆脱嵌套不是更好吗？为了只摆脱嵌套，我将上面的代码作为单独的请求编写。@PalakArora如果需要，您可以在ajaxx方法中移动done处理程序……这样它就不会看起来nested@PalakArora使用

。单击（函数

，

ajax2

和

ajax3

单次点击的调用次数将增加，具体取决于对

#按钮-1

和

#按钮-2

的点击量。下面是一个快速演示：。我猜这不是预期的行为，因此，如果您确实需要解决方法，请查看bott这个答案的om：。我相信这是OP所问问题的正确答案（如何使

单击
#2在
单击后发生
#1
if (isSecondFired ) {
   $.ajax({
        //something            
    });
}
else {
  alert("button 2 ajax is not fired");
}

var firstClick = $.Deferred(),
    secondClick = $.Deferred();

$("#button-1").click(function () {
    $.ajax({
        //something
        success: function () {
            $("#content").html(response);
            firstClick.resolve();
        }
    });
});

firstClick.done(function () {
    $("#button-2").click(function () {
        $.ajax({
            //something
            success: function () {
                secondClick.resolve();
            }
        });
    });
});

secondClick.done(function () {
    $("#button-3").click(function () {
        $.ajax({
            //something
        });
    });
});