Question

我有三个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帖子也会很好。

Answer 1

恕我直言，他们要做的是延迟按钮2和按钮3的事件处理程序注册，如

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);
});

Answer 2

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

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
        });
    });
});

那就是说，我想你应该使用.one('click', function代替.click(function，以防止再次触发ajax调用。

Answer 3

例如：

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);
        });

或：

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

Answer 4

如果在成功回调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");
}

为ajax请求编写jQuery回调

4 个答案: