1

我有三个 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 帖子也将是一件好事。

4

4 回答 4

1

恕我直言，他们的做法是延迟 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);
});
于 2013-11-04T07:22:04.407 回答
1

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

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 调用。

于 2013-11-04T07:38:05.877 回答
0

例如：

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);});
于 2013-11-04T07:23:48.383 回答
0

在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");
}
于 2013-11-04T07:23:58.610 回答