为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回调

回答

相关问题