如何解决这个双 ajax 调用问题答案

【问题标题】：How to solve this double ajax calls issue如何解决这个双 ajax 调用问题
【发布时间】：2012-11-06 23:06:39
【问题描述】：

当用户单击按钮时，我正在尝试执行 2 个 ajax 函数调用。

我有

$('.test').on('click', function(){

    code.getCode();
        code.getText();
})

code.prototype.getCode=function(){
     var call=//call ajax
     call.callback= function(data){
          //parse return data
    }
}


code.prototype.getText=function(){
     var call=//call ajax
     call.callback= function(data){
          //parse return data
    }
}

我只能进行 1 次 ajax 调用，并且只有 1 次 ajax 调用会返回数据。我不知道如何解决这个问题。有任何想法吗？非常感谢！

【问题讨论】：

对于 2 个 AJAX 调用，您期望发生什么？
你的语法错误...code.prototype.getCode()=function??
@charlietfl，我需要进行 2 次数据库搜索。
@elclanrs 感谢您指出这一点。我的错。
你可以一次调用 2 次数据库搜索吗？

标签： javascript jquery ajax

【解决方案1】：

我不确定我是否理解正确，但我认为您正在寻找来自两个 ajax 调用的单个回调..

您应该使用 $.when.done。见下文，

$.when($.ajax("/page1.php"), $.ajax("/page2.php")).done(function(a1,  a2){
    /* a1 and a2 are arguments resolved for the 
        page1 and page2 ajax requests, respectively */
   var jqXHR = a1[2]; /* arguments are [ "success", statusText, jqXHR ] */
   if ( /Whip It/.test(jqXHR.responseText) ) {
      alert("First page has 'Whip It' somewhere.");
   }
});

不确定您是要对其进行排序还是尝试进行 1 次回调。

【讨论】：

【解决方案2】：

您也可以进行第一个 ajax 调用，成功后调用第二个：

$('.test').on('click', function(){

var datastr = "your data";

 $.ajax({  
  type: "POST",  
  url: "url",  
  data: datastr,  
  success: function(successMsg) {                   
          //ajax done
          if (/* not yet complete */) {
            setTimeout(secondAjaxCall(),500);
          } else {
            secondAjaxCall();
         }
      }
  });

});

【讨论】：

【解决方案3】：

您可以将每个返回值保存在代码对象中（因为您处于不同的上下文中，您必须解决“this”）。然后您可以使用第三个函数来检查数据对象是否已加载...并在两者都存在后开始解析。

$('.test').on('click', function(){
    code.getCode();
    code.getText();
})
code.prototype.getCode=function(){
     var call=//call ajax
     var that = this;
     call.callback= function(data){
          //parse return data
          that.codeData = data;
          parseData();
    }
}
code.prototype.getText=function(){
     var call=//call ajax
     var that = this;
     call.callback= function(data){
          //parse return data
          that.textData = data;
          parseData();
    }
}
function parseData() {
 if(!code.textData || !code.codeData) return;
 ... work with both
}

【讨论】：