JQuery Ajax处理

Question

根据我写ajax请求的方式，我得到了不同的结果。下面，是我写的一个版本按预期工作：

$('btn').click(function(){ 
     $.ajax({ 
      url: "JSONHandler.aspx", 
      type: 'get', 
      data: { IsParam : true, anotherParam: paramString, lastParam: paramString2 }, // this data is arbitrary 
      cache: false, 
      error: function() { 
      alert("You made an error"); 
      }, 
      dataType: 'json', 
      success: function (data) { 
       if (data.result == false) { 
        $.ajax({ 
         url: "JSONHandler.aspx", 
         type: 'get', 
         data: {IsNewParam : true, anotherNewParam: paramNewString}, // this data is arbitrary 
         cache: false, 
         error: function() { 
         alert("You made a different error"); 
         }, 
         dataType: 'json', 
         success: function (data) { 
          if (data.result == true) { 
           // do stuff 
          } else { 
           // do other stuff 
          } 
         } 
        }); 
       } 
       else { 
        // Do different things 
       } 
      }  
     }); 
    } 

但是，如果我写这样的代码，该函数不预成型体inteneded：

$('btn').click(function(){ 
     $.ajax({ 
      url: "JSONHandler.aspx", 
      type: 'get', 
      data: { IsParam : true, anotherParam: paramString, lastParam: paramString2 }, // this data is arbitrary 
      cache: false, 
      error: function() { 
      alert("You made an error"); 
      }, 
      dataType: 'json', 
      success: function (data) { 
       if (data.result == false) { 
        var result = callAjax(); 
        if (result == true) 
         // do stuff 
        else 
         // do other stuff 
       } 
       else { 
        // Do different things 
       } 
      }  
     }); 
    } 


    function callAjax() 
    { 
     $.ajax({ 
      url: "JSONHandler.aspx", 
      type: 'get', 
      data: {IsNewParam : true, anotherNewParam: paramNewString}, // this data is arbitrary 
      cache: false, 
      error: function() { 
      alert("You made a different error"); 
      }, 
      dataType: 'json', 
      success: function (data) { 
       if (data.result == true) { 
        return true; 
       } else { 
        return false; 
       } 
      } 
     }); 
    } 

例如，让说我想要顶部（$（'btn'）。click）函数在“// do stuff”部分中发出警报。如果我通过第一个示例运行它，我会按照预期收到警报。

但是，如果我在第二个示例中的“// do stuff”中放置警报，我没有按预期得到警报。在调用浏览器中的开发工具时，我可以看到第二个函数是调用并按照预期返回，但是到这种情况发生时，原始（调用）ajax函数已经移过分支 if（result == true）语句，并且不考虑这个结果，不管它是否为真。

这是为什么？我想它与ajax的异步部分有关，但我想我只是不明白为什么顶部的例子会工作，但底部不会。

有人能帮我理解吗？

Answer 1

第一个Ajax调用不会等待您的第二个示例。它调用第二个Ajax调用并立即转到result == true，该调用未定义。你应该把你的东西作为回调传递给第二个Ajax调用，并在success中调用它。

像

var result = callAjax(function (result) { 
    if (result == true) 
     // do stuff 
    else 
     // do other stuff 
}); 

而且在callAjax()

function callAjax(callback) { 
    ... 
    success: function (data) { 
     callback(data.result); 
    } 
}