jQuery管理多个Ajax调用结果

Question

我的jQuery移动网站上有一个设置页面当用户点击保存按钮时,我更新服务器以获得3种不同的用户输入,即语言,货币,门槛

为了做到这一点,我做了3个单独的ajax调用(使用PUT).所以当一切都成功时,我会转到另一个页面,如果其中任何一个失败,我会留在同一页面上并显示错误消息.

问题是如果所有呼叫都成功,我只想切换页面,如果有任何错误,我想显示一条包含所有消息的警报(而不是3个separete警报窗口),所以我需要等待所有这些的结果调用.

在我使用的所有3个Ajax调用中实现这一点;

async:false 

我在所有这些调用成功方法中添加了一个布尔值;

     success: function (data){
           languageUpatesuccesful=true;

        }

然后是这样的事情;

 if(languageUpatesuccesful){
   make the next call to update currency..etc
}

...

if(allsuccesful(){
  changepage();
}

因此,如果所有成功切换到另一个页面,我可以跟踪何时完成一个呼叫完成然后我进行下一个呼叫.

虽然这有效,但我认为这是一个可怕的解决方案,有没有办法通过使用async:true来实现这一点？

因为禁用异步ajac会冻结页面而我甚至无法显示动画,所以jQuery也不建议这样做.但是,我怎么知道这3个电话何时结束并根据结果采取行动？

Answer 1

使用递延对象连同$.when:

$.when(ajax1(), ajax2(), ajax3()).done(function() {
    // all Ajax calls successful, yay! 
}).fail(function() {
    // oh noes, at least one call failed!
});

在哪里ajaxX定义为:

function ajax1() {
    return $.ajax(...);
}

如果你确实想要链接Ajax调用而不是让它们并发,请看看Bergi的解决方案.