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帖子，但找不到可靠的方法。即使有人可以发布任何教程/博客/ SO帖子也很好。

最佳答案

恕我直言，他们的方法是延迟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);
});

关于javascript - 为ajax请求编写jQuery回调，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19763154/