可能会或可能不会调用多个 AJAX 调用然后执行函数答案

【问题标题】：Multiple AJAX calls may or may not be called then execute function可能会或可能不会调用多个 AJAX 调用然后执行函数
【发布时间】：2017-02-24 21:53:40
【问题描述】：

我正在使用 C# 和 jQuery 构建表单页面，并且我有多个输入，如果它们已填写，我想向附加的 SQL Server 提交 AJAX 调用，如果未填写我想没做什么。一旦所有填充的都完成了 AJAX 调用，那么我想重新加载页面。

现在我有这样的功能：

Func1()
{
   if ($'#form1').val().length > 0 {
   $.post('https://foo/', {id: id, column: col1, value: $('form1').val())
   }

   if ($'#form2').val().length > 0 {
   $.post('https://foo/', {id: id, column: col1, value: $('form2').val())
   }
}

$('#submit').click(function() {
  Func1();
  window.location.reload(true);
} );

然而，这会导致一些值被更新，但不是全部，我知道这与我的异步调用有关。我对异步调用相当陌生，但通常我会放一个 .then(function(){});最后，它们工作正常，但在这种情况下它不能解决任何问题。有人可以指出我正确的资源方向来解决这个问题吗？我不能嵌套我的 AJAX 调用，因为有时 2 会更新而 1 不会。

【问题讨论】：

为什么要使用“C#”和“razor”标签？我猜你在你的项目中使用它们，但它们似乎与这个问题没有任何关系。无论如何，如果您想在所有 Ajax 调用完成后重新加载页面，您可以使用Promise.all() 等待它们。
@nnnnnn 是的，我将它们都用于我的项目。抱歉，如果它们不相关，我不确定。你能给我更多关于如何使用 Promise.all() 的背景信息吗？
是的，因为 ajax 是异步的，并且您在 ajax 调用完成之前调用了location.reload()。但是 ajax 的全部目的是保持在同一页面上并在 ajax 调用完全没有意义（并且会降低性能）之后使用location.reload()
添加了一些信息

标签： javascript c# jquery ajax razor

【解决方案1】：

根据您的要求，您可以通过对代码进行轻微重组来实现它：

  function form1CallAsync(){
      var d = $.Deferred();
      if ($'#form1').val().length > 0) {
       // Ajax call for Form1 post. Important: In the success callback, have    
       //d.resolve() in the end, in the error callback, d.reject()
      } else { d.resolve(); }
      return d.promise();
    }
    function form2CallAsync(){
      var d = $.Deferred();
      if ($'#form2').val().length > 0) {
       // Ajax call for Form2 post. Important: In the success callback, have    
       //d.resolve() in the end, in the error callback, d.reject()
      } else { d.resolve(); }
      return d.promise();
    }
    $('#submit').click(function() {   
           $.when(form1CallAsync(), form2CallAsync()).done(
                  function(a1, a2){
                       // your code to process the results from both ajax posts
                       // ..
                       window.location.reload(true);
                  }
           )
     });

【讨论】：

这是完美的，谢谢！我将尝试一下，如果可行，则将其标记为答案。
这很好用，你只需要在 .$when 之后用构造函数括号实际调用函数。
还需要在每个函数的else语句中解析deferred

【解决方案2】：

我能想到一种解决方案。可能会有更好的解决方案。

1) 用 false 声明两个布尔变量。

2) 一旦特定调用成功/失败，将每个变量设置为 true。

3) 将窗口重新加载移动到文档准备就绪并相应地重新加载。

$(document).ready(function(){     
  if (callOne == true && calltwo == true){
 window.location.reload(true);
 }    
}

【讨论】：

【解决方案3】：

看看优雅的jQuery When

使用上述方法，可以将您的代码重写为：

$('#submit').click(function() {
   if (($'#form1').val().length > 0 && ($'#form2').val().length > 0) {
       $.when($.post(*form1Call*), $.post(*form2Call*)).done(
              function(a1, a2){
                   // your code to process the results from both ajax posts
                   // ..
                   window.location.reload(true);
              }
       )
   }      
 });

【讨论】：

除非我有误解，否则如果 form2 已填写但 form1 未填写，这不会解决我的问题，它永远不会提交 form2 的更新。