ajax 依次调用答案

【问题标题】：ajax calls in sequenceajax 依次调用
【发布时间】：2012-10-08 13:47:40
【问题描述】：

我需要一个接一个地进行两个单独的 ajax 调用。如果第一次调用成功，我需要在第二次调用中使用第一次调用的结果。这是我尝试过的：

$.ajax({
       url:myurl,     // myurl defined elsewhere
       type:'POST',
       data: mydata,  // mydata defined elsewhere

       success: function(data, textStatus) { 
           if (textStatus=='success'){
              // Get paramValue from the data
              // Here I want to call another similar ajax call
              callNextAjax(paramValue); // This function calls a similar ajax call. 
                                        // But always gets error call back there
           }
       },
       error: function(jqXHR, textStatus, errorThrown) {
           alert("First Request Failed");
       }     
});

function callNextAjax(paramValue){
  $.ajax({
           url:myurl1,     // myurl1 defined elsewhere
           type:'POST',
           data: mydata1,  // mydata1 defined elsewhere.  mydata1 uses paramValue

           success: function(data, textStatus) { 
               if (textStatus=='success'){
                  goToNewHtmlPage(); // open up a new html page in this function
               }
           },
           error: function(jqXHR, textStatus, errorThrown) {
               alert("Second Request Failed");
           }     
    });
}

callNextAjax() 函数是一个类似的调用，它使用值 paramValue。在 callNextAjax 函数中，我总是收到带有警报“第二次请求失败”的错误回调。当我单独运行 callNextAjax 时（不在第一个 ajax 的成功函数内）它工作正常（从 goToNewHtmlPage() 转到下一页）

你猜我的实现有什么问题吗？我已经用完了我的实验。这里的任何类型的指针都会有所帮助。

【问题讨论】：

您必须引用callNextAjax 代码并提供更多上下文。
同意@T.J.Crowder，但我首先要检查的是成功函数中 paramValue 的数据类型——它是正确的类型还是需要某种类型转化率。
感谢您的调查。我添加了 callNextAjax() 的代码
FireBug 是你的朋友。这是您在开始学习 javascript 或 AJAX 之前应该学习使用的第一件事。

标签： javascript ajax

【解决方案1】：

试试这样的：

AjaxCheckResult = function() {

    var url = "http://url";

    return {

        errorfunction: function(jqXHR, textStatus, errorThrown) {
                   alert("First Request Failed");
        } ,
        sucessFunction: function(data, textStatus) { 
                   if (textStatus=="success"){
                     me.doAjax(paramValue);
                   }
               },

        doAjax: function(mydata){
            me = this;
            $.ajax({
               url:me.url,     // myurl defined elsewhere
               type:'POST',
               data: mydata,  // mydata defined elsewhere

               success: sucessFunction
               error: errorfunction
            });
        }
    };
}();

AjaxCheckResult.doAjax(Something);

【讨论】：

【解决方案2】：

哇，Javascript 的这个领域经常令人困惑，我经常对一些解决方案的复杂程度感到惊讶。 jQuery 和 Javascript 通常被设计为异步的，这常常使得优雅地创建同步代码变得困难。这就是流控制库做得很好的地方。有几个可用的流控制库（尤其是 async 在 Node.js 上有大量用户群），但对于客户端 JS，Frame.js 非常擅长解决这个问题，维护可读代码，并且可以扩展到更大的问题这种类型的。

Frame(function(next){
    $.ajax({
       url:myurl,     // myurl defined elsewhere
       data: mydata,  // mydata defined elsewhere
       success: function(data, textStatus) { 
           if (textStatus=='success'){
              // ... Get paramValue from the data
              next(paramValue);
           }
       },
       error: function(jqXHR, textStatus, errorThrown) {
           alert("First Request Failed");
           next();
       }     
    });
});
Frame(function(next, paramValue){
  if(paramValue){
    $.ajax({
        url:myurl1,     // myurl1 defined elsewhere
        data: mydata1,  // mydata1 defined elsewhere.  mydata1 uses paramValue
        success: function(data, textStatus) { 
            if (textStatus=='success'){
                next(secondParamValue);
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            alert("Second Request Failed");
            next();
        }     
    });  
  }
});

Frame(function(next, secondParamValue){
  if(secondParamValue){
      goToNewHtmlPage(); // open up a new html page in this function
  } else {
      // do something else
  }
  next();
});

Frame.start();

【讨论】：