Question

我有以下AJax请求功能，它工作正常。一旦成功，它将返回1，否则为2。

现在我想基于此返回值在此函数之外执行一些操作，如下所示，但它不起作用..它总是返回“ undefined ”...

我希望return_code根据以下代码

返回1 or 2

<script>

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

AJAX请求：

<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如何完成库以及实现＆＃34; promise＆＃34;逻辑，只是为了避免回调地狱。

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..

请不要在生产中使用它，因为while会导致浏览器停止我认为。但这应该向你解释这种行为。

正确解决方案

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

度过愉快的一天

Javascript函数不从Ajax请求返回值

3 个答案: