使用.done的嵌套AJAX調用

Question

我對AJAX還是很陌生，但正在從事一個需要ajax調用來驗證特定值的項目，然后如果第一個返回期望值，則再進行一次ajax調用。 我正在嘗試實現.done / .fail模型，但是找不到阻止兩個調用同時發生的方法，而不是一旦第一個調用完成並成功就阻止了這兩種方法。

以下代碼將兩次調用ajaxCall函數，但同時調用而不是連續調用。 我研究了很多代碼，包括嵌套的AJAX調用 ， jQuery擺脫了嵌套的Ajax函數以及$ .when.done回調不起作用 ，但似乎沒有一個適合我的實際情況，或者也許我只是不明白編碼。 無論哪種方式，我都無法找到解決方案，我們將不勝感激！

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

似乎可以兌現諾言 ，但我無法確定在這種情況下如何使用諾言 。 在此先感謝您指出正確方向的任何指針。

更新：

我進行了一系列測試，結果各不相同。 為了進行昨晚的最終測試，我放置了另一個console.log(msg); 直接在ajaxCall("2"); 每次生成的味精始終為“ 1”時，使我相信呼叫未正確進行。 這個結果告訴我xReturn.done(function(msg)...僅被調用一次，但是我認為每次ajax調用都將調用它。

有了這些新信息，我將在今晚進行其他測試並向您報告。
謝謝

Answer 1

您需要將.done()方法綁定到每個 Promise。 xReturn.done()將函數綁定到該xReturn.done() 。

當您執行xReturn = ajaxCall("2"); ，您將 xReturn 替換為其他對象。 此對象沒有綁定到.done()方法。

您需要將.done()綁定到每個promise，但這不會自動發生。

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 。 這是一個工作小提琴 ，使用相同的功能進行連續的調用。

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