Question

我正在使用“http://www.w3schools.com/Php/php_ajax_database.asp”在下拉列表的onchange上显示数据库中的数据。我在数据库中有大量数据。因此需要时间来加载。因此，我想在页面的某处显示加载消息，直到数据显示。

代码：

<script>
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
} 
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>

 <form>
 <select name="users" onChange="showUser(this.value)" style="margin-left: -680px;margin-top: -10px;">
 <option value="1">Current Projects</option>
 <option value="2">All Projects</option>
 </select>
 </form>
 </div></div>
 <div id="txtHint"> /*Content*/ </div>

getuser.php：数据库查询以显示数据。

Answer 1

在我看来，更容易jusk javascribt库/框架，如JQuery的Ajax请求或简单的javascript。如果你想用旧学校的方式做，那应该能够帮助你：

if(obj.readyState == 0)
{
 document.getElementById('copy').innerHTML = "Sending Request...";
}
if(obj.readyState == 1)
{
 document.getElementById('copy').innerHTML = "Loading Response...";
}
if(obj.readyState == 2)
{
 document.getElementById('copy').innerHTML = "Response Loaded...";
}
if(obj.readyState == 3)
{
 document.getElementById('copy').innerHTML = "Response Ready...";
}
if(obj.readyState == 4)
{
 if(obj.status == 200)
 {
  return true;
 }
 else if(obj.status == 404)
 {
  // Add a custom message or redirect the user to another page
  document.getElementById('copy').innerHTML = "File not found";
 }
 else
 {
  document.getElementById('copy').innerHTML = "There was a problem retrieving the XML.";
 }
}

Answer 2

实际上很容易，只需将你想要的信息/图片放在div中，就像那样：

<div id="txtHint"> Loading... </div>

加载数据时JS：

document.getElementById("txtHint").innerHTML=xmlhttp.responseText;

这将清空div并替换为Ajax内容。

实际上，我认为您的代码已经正常运行。

如何在内容完全加载之前显示加载消息

2 个答案: