AJAX没有更新变量

Question

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

问题是foo的值仍为空字符串。我知道这不是服务器端脚本的问题，因为我会收到错误警告或至少是字符串"New value:"。

这是一个演示问题的JSFiddle：http://jsfiddle.net/GGDX7/

为什么foo的值不会改变？

---

纯JS

我正在制作一个AJAX请求，用来更新服务器的响应来更新变量（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:"。

这是一个演示问题的JSFiddle：http://jsfiddle.net/wkwjh/

为什么foo的值不会改变？

Answer 1

当您提醒foo的值时，成功处理程序尚未触发。由于成功处理程序重新分配变量，因此其值仍为空字符串。

事件的时间表如下所示：

1. foo被分配空字符串
2. 创建并发送了AJAX请求。
3. 警告foo的值。 （请注意，foo尚未更改）
4. AJAX请求完成。
5. foo = "New value:" + this.responseText;

由于我们想要在之后警告foo 的值已经发生变化，因此解决方案是将警报置于成功回调中。

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

Answer 2

“AJAX”中的（第一个） A 代表异步。事务不会立即发生，因此您的alert()会在远程调用完成之前发生一段时间。

Answer 3

问题是您的警报在请求完成之前被触发。试试这段代码：

我已将警报放入$.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.');
    }
});

Answer 4

问题很简单......

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.');
    }
});

你会发现它按预期工作

Answer 5

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

$.ajax({
    url: "/",
    dataType: "text",
    success: function(response) {
        foo = "New value:" + response;

        alert(foo);
    },
    error: function() {
        alert('There was a problem with the request.');
    }
});