Question

我对AJAX很新，但是在一个需要ajax调用来验证特定值的项目上工作，如果第一个返回预期值，则再进行一次ajax调用。我正在尝试实现.done / .fail模型，但找不到阻止两个调用同时发生的方法，而不是一旦第一次调用完成并成功。

以下代码将两次调用ajaxCall函数，但是同时而不是连续调用。我研究了大量代码，包括Nested AJAX Calls，jQuery getting rid of nested ajax functions和$.when.done callback isn't working，但似乎没有一个代码适合我的确切方案，或者我只是不理解代码。无论哪种方式，我都无法找到解决方案，任何帮助将不胜感激！

var xReturn = ajaxCall("1");    

xReturn.done(function(msg){
    console.log("callback "+msg+" successful");

    // if successful, place second call
    if(parseInt(msg)==1)
        xReturn = ajaxCall("2");    
});


function ajaxCall(mop){
    return $.ajax({
         url: "getItem.php",
         type: "POST",
         data: {code: '<?php echo $code; ?> ', op:mop}
    });
}

似乎 promises 可能是要走的路，但我不能在这种情况下如何使用它们。提前感谢任何指向正确的方向。

更新

我经历了一系列不同结果的测试。对于我昨晚的最后一次测试，我在console.log(msg);之后直接放置了另一个ajaxCall("2");。每次产生的消息总是“1”时，让我相信呼叫没有正确发生。这个结果告诉我xReturn.done(function(msg)...只被调用一次，但我认为每次ajax调用都会调用它。

有了这些新信息，我今晚将进行额外测试并报告感谢

Answer 1

您需要将.done()方法绑定到每个承诺。 xReturn.done()将函数绑定到该承诺。

执行xReturn = ajaxCall("2");时，您使用其他对象替换 xReturn。该对象没有绑定.done()方法。

您需要将.done()绑定到每个承诺，这不会自动发生。

var xReturn = ajaxCall("1");
// This binds the callback to this *specific* promise    
xReturn.done(ajaxDone);    

function ajaxCall(mop){
    return $.ajax({
         url: "getItem.php",
         type: "POST",
         data: {code: '<?php echo $code; ?> ', op:mop}
    });
}

function ajaxDone(msg){
    console.log("callback "+msg+" successful");

    // if successful, place second call
    if(parseInt(msg)==1){
        xReturn = ajaxCall("2");

        // Bind a callback to this *new* object
        xReturn.done(ajaxDone);
    }
}

Answer 2

有多种方法可以解决这个问题。

你可以简单地从第一个成功调用第二个ajax调用。以下几行中的内容

function ajaxCall(mop){
    $.ajax({
         url: "getItem.php",
         type: "POST",
         data: {code: '<?php echo $code; ?> ', op:mop}
    }).done(function(msg) {
        console.log("First call is done. Received data as ", msg);
        if(parseInt(msg)==1) {
            $.ajax({
                //Repeat Options
            }).done(function(newMsg)) {
                console.log("We're done");
            };
        }
    });
}

}

如果您确实想使用.done / .fail模型，可以尝试使用$.when。这是一个使用相同函数执行连续调用的fiddle。

function ajaxCall(mop){
    return $.ajax({
            url: "/echo/json/",
            type: "POST",
            data: {
                json: $.toJSON({data: mop}),
                delay: Math.floor(Math.random()*4)
            }
    });
}

$.when(ajaxCall("1")).done(function(data) {
    console.log("Done with first call. About to call second");
        if(data /* and add whatever conditions you need to call the next function */) {
            ajaxCall("2");
        }
});

Answer 3

试试这样。

ajaxCall("1"); 

function ajaxCall(mop){
$.post( "getItem.php", {code: '<?php echo $code; ?> ', op:mop})
  .done(function( msg) {
    console.log("callback "+msg+" successful");
    if(parseInt(msg)==1)
        ajaxCall("2"); 
  });

}

您也可以将这些用于以前的代码

  .fail(function() {
    alert( "error" );
  })
  .always(function() {
    alert( "finished" );

Answer 4

怎么样：

var xReturn1 = ajaxCall("1"),
    xReturn2 = ajaxCall("2");

$.when(xReturn1, xReturn2).done(function( a1, a2 ) {
    var data1 = a1[0], data2 = a2[0];
    console.log("Both done");
});

嵌套的AJAX使用.done调用

4 个答案: