Java腳本函數不能從Ajax請求返回值

Question

我有以下AJAX請求函數，它工作正常。成功後返回1 else 2.

現在我想根據這個返回值執行一些操作，如下所示，但它不工作..它總是返回「undefined」...

我預計return_code應根據下面的代碼

<script> 

var return_code=add_to_cart_ajax(200); 
alert(return_code); 
</script> 
returns "undefined" 

AJAX請求返回要麼1 or 2：

<script> 
//Ajax to send request to add 
function add_to_cart_ajax(id) 
{ 
    if (window.XMLHttpRequest) 
     {// code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
     } 
    else 
     {// code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     xmlhttp.onreadystatechange=function() 
      { 
      if (xmlhttp.readyState==4 && xmlhttp.status==200) 
      { 
alert(xmlhttp.responseText); // returns 1 
       if (xmlhttp.responseText==1) 
       { 
        return 1; 
       } 
       else 
       { 
        return 2; 
       } 
      } 
      } 
    xmlhttp.open("GET","add.php?id="+id,true); 
    xmlhttp.send(); 
}//end of the function.. 
</script> 

Answer 1

由於AJAX調用是異步的，因此處理它的一種常見方式是使用一個回調函數，一旦處理請求就會調用它。

喜歡的東西

<script> 
    add_to_cart_ajax(200, function(return_code) { 
    alert(return_code); 
    }); 
</script> 


<script> 
    //Ajax to send request to add 
    function add_to_cart_ajax(id, callback) { 

    ... 

    alert(xmlhttp.responseText); // returns 1 
    if (xmlhttp.responseText==1) { 
     callback(1); 
    } else { 
     callback(2); 
    } 

    ...   

    }//end of the function.. 
</script> 

編輯：如果您需要掛到值return_code，你會做

<script> 
    var return_code; 
    add_to_cart_ajax(200, function(result) { 
    return_code = result; 
    }); 
</script> 

但要明白這一點很重要，因爲AJAX請求是異步的，你的return_code變量將沒有分配給它的值，直到AJAX請求被滿足，並且你不能將它用於任何直到發生的事情，所以任何需要與return_code做某事的代碼應該包含在呼叫中或者從呼叫中調用背部。如果你來自所有代碼從上到下運行的背景，那麼這是起初有點難以掌握的事情之一。一旦你開始使用異步的東西，情況並非如此。

Answer 2

看到一個ajax調用是異步的，您不能期望在您的alert(return_code);中得到結果，因爲那時ajax調用還沒有得到響應。

查看庫如jQuery或Zepto所做的那樣以及遵循「承諾」邏輯來實現某些東西，以避免回調地獄可能是有用的。

Answer 3

確定我會嘗試打一個比方：如果您訂購在亞馬遜包

，並且希望在下一步

orderPackage(); 
unpackPackage(); // undefined/exception, because you have to wait for the package to be arrived 

儘量不要用返回值來解開這個「的onreadystatechange」。你可以從這個方法中調用另一個函數，或者你可以設置全局變量。作爲例子：

只是爲了解釋作品（請勿使用代碼的這一和平，向下滾動以便更好的解決方案！）Ajax如何：

ajaxReturn = null; 

function add_to_cart_ajax(id) { 
    if (window.XMLHttpRequest) 
     {// code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
     } 
    else 
     {// code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     xmlhttp.onreadystatechange=function() 
      { 
      if (xmlhttp.readyState==4 && xmlhttp.status==200) 
      { 
       ajaxReturn = xmlhttp.responseText; 
      } 
      } 
    xmlhttp.open("GET","add.php?id="+id,true); 
    xmlhttp.send(); 

    while(ajaxReturn == null) { 
    //waiting for response 
    //will break if the request is finished 
    } 

    alert(ajaxReturn); 

}//end of the function.. 

請不生產因爲同時使用會導致瀏覽器停止我想。 但這應該解釋你的行爲。

正確的解決方案

// This will send an ajax-request and execute the fCallback if finished 
// @param sUrl - Url to send the request to 
// @param fCallbackSuccess - method that will be executed on successfull request 
// @param fCallbackFailed - method that will be executed on failed request 
// @param bAsync - will make the request async or sync 
function ajax(sUrl, fCallbackSuccess, fCallbackFailed, bAsync) { 
     if (window.XMLHttpRequest) { 
      oXmlHttp=new XMLHttpRequest(); 
     } else { 
      oXmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     oXmlHttp.onreadystatechange=function() { 
      if (oXmlHttp.readyState==4 && oXmlHttp.status==200) { 
       fCallbackSuccess.apply(oXmlHttp); 
       return; 
      } 
      fCallbackFailed.apply(oXmlHttp); 
     } 
     oXmlHttp.open("GET", sUrl, bAsync); 
     oXmlHttp.send(); 
} 

//usage example: 

var fSuccess = function(oXmlHttp) { 
    //do something with oXmlHttp 
    alert(oXmlHttp.responseText); 
} 

var fFailed= function(oXmlHttp) { 
    //do something with oXmlHttp 
    alert('Request failed!'); 
} 

ajax("add.php?id="+id, fSuccess, fFailed, true); 

有一個愉快的一天