javascript - InnerHTML 更新不起作用

Question

xmlHttp = new XMLHttpRequest(); 
xmlHttp.open( "GET", "myurlhere.php", true );
xmlHttp.send();
var display = document.getElementById("display");
display.innerHTML = xmlHttp.response;

这是我的代码。此代码是单击按钮时执行的函数的一部分。它确实执行了 AJAX 请求，但是 innerHTML 没有更新。这就是它变得非常奇怪的地方。我进入浏览器，进入 JS 控制台，然后输入display.innerHTML = xmlHttp.response;. 然后它会更新。我制作了第二个按钮，display.innerHTML = xmlHttp.response;作为 onclick 事件......然后它发生了。但是如果我把它作为第一个按钮的 onclick 事件的第二行呢？没运气。我该如何解决这个令人困惑的问题？

Answer 1

那是因为 xmlHttp 是异步的。您需要在响应到达后进行修改。它在您在 js 控制台中键入它的持续时间内。

您需要在 onload 事件中设置内部 html：

xmlHttp = new XMLHttpRequest(); 
xmlHttp.open( "GET", "myurlhere.php", true );
xmlHttp.onload = function(e) {
  var display = document.getElementById("display");
  display.innerHTML = xmlHttp.response;  
}
xmlHttp.send();

Answer 2

您正在传递true异步发送。这意味着您的其余代码在等待您的响应时正在执行。换句话说，您试图在实际从服务器获取数据之前将数据插入到您的 html 中。因此，一旦您获得该数据，您就需要一个回调来触发：

xmlHttp.onload=function(e) {
    document.getElementById('display').innerHTML=xmlHttp.responseText;  
}