jQuery管理多个Ajax调用结果

时间:2013-01-29 15:49:54

标签: javascript jquery ajax jquery-mobile

我的 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个电话何时结束并根据结果采取行动?

3 个答案:

答案 0 :(得分:8)

deferred objects$.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's solution

答案 1 :(得分:4)

您可以使用延迟界面轻松链接它们:

$.ajax({…})
  .then(function(languageUpateResult) {
     return $.ajax({…});
  })
  .then(function(currencyUpdateResult) {
     return $.ajax({…});
  })
  .then(function(thresholdUpdateResult) {
     changePage();
  });

抱歉,我跳过了ajax调用分开的事实。上面的代码按顺序执行它们,如果你只是想并行执行它们并等待所有它们完成使用$.when() - 请参阅@FelixKling's answer

答案 2 :(得分:1)

您可以尝试使用Web worker在后台线程中执行异步调用。网络工作者非常好browser support并且应该解决您的问题。如果您有兴趣,我已经编写了一个Web工作者库的一些抽象,以使它们更容易使用(只需发送给我一个下午)。