Question

我需要一个接一个地进行两个单独的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函数内部，我总是得到错误回调，警告“Second Request Failed”。当我单独运行callNextAjax时（不在第一个ajax的成功函数内），它工作正常（从goToNewHtmlPage（）移到下一页）

有什么猜测我的实施有什么问题？我已经用尽了这个实验。这里的任何类型的指针都会有所帮助。

Answer 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);

Answer 2

哇，Javascript的这个领域经常被混淆，我经常对一些解决方案有多复杂感到惊讶。 jQuery和Javascript通常被设计为异步，这通常使得优雅地创建同步代码变得困难。这就是Flow Control库的功能。有几个Flow Control库可用（特别是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();

ajax按顺序调用

2 个答案: