Javascript 在加载AJAX回复之前显示项目

如果用户单击与我的AJAX响应相关的按钮，我将尝试显示一个项目。div应该在单击按钮后显示，在加载整个页面后隐藏

我的AJAX：

document.getElementById('mainContent').style.display = 'none';
document.getElementById('productDetail').style.display = 'block';
//ajax
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("response").innerHTML =
    this.responseText;
  }
};
xhttp.open("GET", "product/" + id + "/", true);
xhttp.send();

我试试这个： （如果加载了代码，我添加了一个show div，并且我想在加载后隐藏它）

我也试过了 （我希望与ajax响应最后一个div中的onload事件关联的隐藏代码）

*并在html AJAX响应中的div末尾添加了onload函数

</div id="myLastDivFromAjaxRespone" onload="hiddenDiv()">

document.getElementById('divForShow').style.display="none"; //hiddenDiv function

document.getElementById（'divForShow'）.style.display=“无”//希登迪夫函数

---

如何在单击按钮后显示div并隐藏整个AJAX响应是否已加载。

您可以简单地将代码拆分为两个函数。 然后，单击按钮，调用before_ajax（），然后 例如：

function before_ajax(){
document.getElementById(".element").innerHTML = "<b>Loading...</b>";
}

function do_ajax(){
document.getElementById('mainContent').style.display = 'none';
document.getElementById('productDetail').style.display = 'block';
//ajax
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("response").innerHTML =
    this.responseText;
  }
};
xhttp.open("GET", "product/" + id + "/", true);
xhttp.send();
}
function reload_page(){
window.location.reload();
}

_ajax（）之前的函数{ document.getElementById（“.element”）.innerHTML=“加载…”； } 函数do_ajax（）{ document.getElementById（'mainContent'）.style.display='none'； document.getElementById（'productDetail'）.style.display='block'； //阿贾克斯 var xhttp=newXMLHttpRequest（）； xhttp.onreadystatechange=函数（）{ if（this.readyState==4&&this.status==200）{ document.getElementById（“响应”）.innerHTML= 这个.responseText； } }; xhttp.open（“GET”，“product/”+id+“/”，true）； xhttp.send（）； } 函数重载_页面（）{ window.location.reload（）； }

---

结束标记不接受属性：

</div id="myLastDivFromAjaxRespone" onload="hiddenDiv()">

document.getElementById('divForShow').style.display="none"; //hiddenDiv function

function before_ajax(){
document.getElementById(".element").innerHTML = "<b>Loading...</b>";
}

function do_ajax(){
document.getElementById('mainContent').style.display = 'none';
document.getElementById('productDetail').style.display = 'block';
//ajax
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("response").innerHTML =
    this.responseText;
  }
};
xhttp.open("GET", "product/" + id + "/", true);
xhttp.send();
}
function reload_page(){
window.location.reload();
}