Question

我有点困惑为什么console.log（在底部）按照我的预期返回数据，但return optiondata没有。

function populate_selectbox()
{               
var ajaxRequest;

try {
    // Opera 8.0+, Firefox, Safari
    ajaxRequest = new XMLHttpRequest();
} catch (e) {
    // Internet Explorer Browsers
    try {
        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
        // Something went wrong
            alert("Your browser broke!");
            return false;
        }
    }
}

var queryString = "?callFunction=get_all_data";
//console.log(queryString);

ajaxRequest.open("GET", "php/shares.php" + queryString, true);
ajaxRequest.send(null);

var optiondata ="";

// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function() 
{

    if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200) 
    {
        //console.log("IF....");

        var resp = JSON.parse(ajaxRequest.responseText);
        //console.log(resp)

        for (var i = 0; i < resp.data.length; i++) 
        {
            if(i === resp.data.length -1)
            {
                optiondata += "'"+resp.data[i].name+"'"; //For the last name in the loop
            }
            else
            {
                optiondata += "'"+resp.data[i].name+"',";
            }

        }

        console.log(optiondata); //This works
        return optiondata; //This returns undefines
    }    
};  
}

问题：为什么结果不同？

Answer 1

你不能使用＆＃34; return＆＃34;从ajax回调中返回任何数据。关键字，因为ajax请求是异步调用。

提供您自己的回调fn并将结果传递给它。

function myAjaxFn(..., done) {
    // ...
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
          done(xmlhttp.responseText);
        }
      }
    xmlhttp.open("GET","ajax_info.txt",true);
    xmlhttp.send();
}

或者使用承诺，例如： http://joseoncode.com/2011/09/26/a-walkthrough-jquery-deferred-and-promise/

Answer 2

尝试使用Promise对象

    var queryString = "?callFunction=get_all_data";
    var request = function(queryString) {
      return new Promise(function(resolve, reject) {
        var ajaxRequest = new XMLHttpRequest()
        , optiondata = "";
        ajaxRequest.open("GET", "php/shares.php" + queryString, true);
        ajaxRequest.onload = function() {
          if (this.readyState === 4 && this.status === 200) {
            // do stuff
            var resp = JSON.parse(this.responseText);
            console.log(resp);
            for (var i = 0; i < resp.data.length; i++) {
              if (i === resp.data.length -1) {
                optiondata += "'"+resp.data[i].name+"'"; 
              }
              else {
                optiondata += "'"+resp.data[i].name+"',";
              }
            }
            console.log("onload:", optiondata); 
            resolve(optiondata); 
          } else {
            reject(this.status)
          }    
        };  
        ajaxRequest.send(null);
      });
    };

    request(queryString).then(function success(data) {
      console.log("returned data:", data)
    }, function error(err) {
      console.log(err)
    });

    var queryString = "?callFunction=get_all_data";
    var request = function(queryString) {
      return new Promise(function(resolve, reject) {
        var ajaxRequest = new XMLHttpRequest()
        , optiondata = "";
        ajaxRequest.open("GET", "https://gist.githubusercontent.com/guest271314/6a76aa9d2921350c9d53/raw/49fbc054731540fa68b565e398d3574fde7366e9/abc.txt", true);
        ajaxRequest.onload = function() {
          if (this.readyState === 4 && this.status === 200) {
            // do stuff
            optiondata = this.responseText;
            console.log("onload:", optiondata); 
            resolve(optiondata); 
          } else {
            reject(this.status)
          }    
        };  
        ajaxRequest.send(null);
      });
    };
    
    request(queryString).then(function success(data) {
      console.log("returned data:", data)
    }, function error(err) {
      console.log(err)
    });

XMLHttpRequest - 在console.log中返回数据，但不在函数返回中返回

2 个答案: