爲Ajax請求編寫jQuery回調

我有三個Ajax請求。第二個可以在第一個和第三個可以在第二個之後被髮射後才能被髮射。爲Ajax請求編寫jQuery回調

目前，我一起寫所有三個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 
    }); 
});});

我怎麼能更好的結構上使用回調和封裝每個Ajax請求到一個單獨的功能，我的js代碼？我看了很多SO帖子，但無法找到可靠的方法。即使可以發佈任何教程/博客/ SO帖子，這也會很好。

來源

2013-11-04 Palak Arora

因此，如果您在按鈕1之前單擊按鈕3，那麼不應該觸發ajax請求 –

@ArunPJohny：是的，它不能被解僱。只有在第二個響應返回後才能觸發第三個請求。 –

使用一個庫，它爲你做。想到caolan/async和kriskowal/q。 –

恕我直言，他們的方式做的是拖延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-04 07:22:04

同意。但是，擺脫嵌套不是更好嗎？爲了獲得嵌套，我將上面的代碼作爲單獨的請求寫入。 –

@PalakArora如果你願意，你可以在ajaxx方法中移動done處理程序....所以它不會看起來嵌套 –

@PalakArora使用'.click（函數'，'ajax2'和'ajax3根據'＃button-1'和'＃button-2'的點擊次數，單次點擊的次數會增加，下面是一個快速演示：http://jsfiddle.net/wared/eav8s/。I猜測這不是預期的行爲，所以，如果您確實需要解決方法，請查看此答案的底部：http://stackoverflow.com/a/19763435/1636522。 – leaf

例如：

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-04 07:23:48

如何具有AJAX的成功回調布爾變量。

var isFirstFired = false; 
var isSecondFired = false;

這裏是按鈕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-04 07:23:58 Praveen

你可以做到這一點（非常接近喲u've試過）：

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

這麼說，我想你應該寧可爲了防止AJAX調用再次觸發使用.one('click', function代替.click(function。

來源

2013-11-04 07:38:05 leaf

我相信這是OP所要求的正確答案（如何讓'click'＃2在'click'後發生＃1 –

爲Ajax請求編寫jQuery回調

回答

相關問題