对服务器的 HTTP 请求不更新标签

Question

我正在从数据库中检索数据以将其显示在标签中。

let work_type = "cooking";

let xmlhttp =  createXMLHttp();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        document.getElementById("work_cost").innerHTML = this.responseText;
    }
};
xmlhttp.open("GET", "../php/functions.php?type=" + work_type , true);
xmlhttp.send();


console.log(document.getElementById("work_cost").innerHTML);

问题是 console.log 显示以前的数据，即使标签 "work_cost" 完全改变了。我怎样才能得到我看到的真实标签值？

例如： 1. 我从服务器得到“2”。 2. 在我的标签中放置“2” 3. console.log (label.value) 显示 "undefined"。 4.下拉菜单变化 5.我再次去服务器，现在得到“3” 6. 在标签中放置“3”。 7. 尝试console.log(label.value)。我希望看到“3”，因为那是我在网页中看到的内容，但控制台显示“2”

所以控制台似乎只看到前一步。

Answer 1

console.log 语句在您定义 HTTP 请求后立即执行，但在服务器返回响应之前。

请记住，服务器响应需要时间。

你可以这样想：

创建 HTTP 请求对象
对于这个请求，当我们稍后得到响应时，运行下面的代码：
- 将按钮标签设置为响应的内容
向服务器发送请求
记录标签的当前内容

请注意，4 不会等待响应返回。发送响应是非阻塞。响应将在稍后处理。

有时，当您在本地进行开发时，它有助于在开发工具中限制您的网络，这样您就可以夸大请求和响应之间的延迟。在 Chrome 中，您可以通过打开开发人员工具并选择网络选项卡，然后找到此下拉菜单来执行此操作：

对服务器的 HTTP 请求不更新标签

HTTP request to server does not update label

javascript

php

xmlhttprequest

console.log