Javascript AJAX不更新变量 jQuery

我正在发出一个AJAX请求，用服务器的响应更新变量（

foo

）的值。以下是我正在使用的代码：

//## My variable ##

var foo = "";


//## Send request ##

$.ajax({
    url: "/",
    dataType: "text",
    success: function(response) {
        foo = "New value:" + response;
    },
    error: function() {
        alert('There was a problem with the request.');
    }
});


//## Alert updated variable ##

alert(foo);

//## Compatibility ##

var myRequest;
if (window.XMLHttpRequest) {
    myRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    myRequest = new ActiveXObject("Microsoft.XMLHTTP");
}


//## My variable ##

var foo = "";


//## Response handler ##

myRequest.onreadystatechange = function() {
    if (this.readyState === 4) {
        if (this.status === 200) {
            foo = "New value:" + this.responseText;
        } else {
            alert('There was a problem with the request.');
        }
    }
};


//## Send request ##

myRequest.open('GET', "response.php");
myRequest.send();


//## Alert updated variable ##

alert(foo);

问题是

foo

的值仍然是空字符串。我知道这不是服务器端脚本的问题，因为我要么会收到错误警报，要么至少会收到字符串

“New value:”

下面是一个演示问题的JSFIDLE：

为什么

foo

的值不变

---

纯JS 我正在发出一个AJAX请求，用服务器的响应更新变量（

foo

）的值。以下是我正在使用的代码：

//## My variable ##

var foo = "";


//## Send request ##

$.ajax({
    url: "/",
    dataType: "text",
    success: function(response) {
        foo = "New value:" + response;
    },
    error: function() {
        alert('There was a problem with the request.');
    }
});


//## Alert updated variable ##

alert(foo);

//## Compatibility ##

var myRequest;
if (window.XMLHttpRequest) {
    myRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    myRequest = new ActiveXObject("Microsoft.XMLHTTP");
}


//## My variable ##

var foo = "";


//## Response handler ##

myRequest.onreadystatechange = function() {
    if (this.readyState === 4) {
        if (this.status === 200) {
            foo = "New value:" + this.responseText;
        } else {
            alert('There was a problem with the request.');
        }
    }
};


//## Send request ##

myRequest.open('GET', "response.php");
myRequest.send();


//## Alert updated variable ##

alert(foo);

问题是

foo

的值保持为空字符串。我知道这不是服务器端脚本的问题，因为我要么会收到错误警报，要么至少会收到字符串

“New value:”

下面是一个演示问题的JSFIDLE：

---

为什么

foo

的值没有改变？

在“AJAX”中的（第一个）A代表异步。事务不会立即发生，因此您的

alert（）

会在远程调用完成前一段时间发生。

当您向

foo

的值发出警报时，成功处理程序尚未启动。由于重新分配变量的是成功处理程序，因此其值保持为空字符串

事件的时间线如下所示：

foo

被分配了空字符串

创建并发送AJAX请求

将警告

foo

的值。（请注意，

foo

尚未更改）

AJAX请求完成

foo=“新值：”+this.responseText

由于我们希望在

foo

的值发生更改后发出警报，因此解决方案是将警报放入成功回调中

---

现在，它将在收到AJAX响应后执行。

问题在于，您的警报是在请求完成之前触发的。请尝试以下代码：

我已将警报放入

$.ajax

的回调函数中，这意味着只有在

.ajax

部分完成后才会触发回调函数。这将传输新数据，设置变量，然后向其发出警报，而不是同时调用请求和警报变量

$.ajax({
    url: "/",
    dataType: "text",
    success: function(response) {
        foo = "New value:" + response;
        alert(foo);
    },
    error: function() {
        alert('There was a problem with the request.');
    }
});

问题很简单

alert(foo);

将在处理请求时执行，并且不会更改

foo

如果您这样做：

$.ajax({
    url: "/",
    dataType: "text",
    success: function(response) {
        foo = "New value:" + response;
        alert(foo);
    },
    error: function() {
        alert('There was a problem with the request.');
    }
});

---

您将看到它按预期工作

您的警报在Ajax请求完成之前执行。尝试以下方法。 var foo=“”

---

相关：回调是异步的，如果你不知道这意味着什么，请仔细阅读@JuanMendes，我知道异步意味着什么。我问这个问题是作为一个广义的参考问题，因为我们在这个话题上有很多重复的衍生产品。看我链接的元问题。是的。。。我在想。。。拥有12.8k的人真的不知道这里发生了什么吗？可能是@Asad的复制品不，随你怎么做。如果我不高兴，我会告诉你的。