Question

我正在php / mysql中创建一个数据输入表单。我添加了许多下拉列表和自动完成的文本框，它们异步查询数据库并获取数据。我想通知用户客户端和服务器之间的某种交互正在进行中，所以我将一个元素放在隐藏的形式中

 <div id="wait" style="background-color:white;position:absolute;top:240px;left:360px;width:70px;height:50px;visibility:hidden;border: 1px solid black;padding:20px;">
 <img src="images/wait.gif" style="position:relative;top:0px;left:25px"><br /><br />Please wait...
 </div>

在ajax组件的方法handleHttpResponse中，我做了以下

if (http.readyState == 4) {
  document.getElementById('wait').style.visibility = "hidden";
  alert('The server script has now completed');
} else {
  document.getElementById('wait').style.visibility = "visible";
}

上面的函数位于当前页面中包含的脚本文件ajax.js中，以及需要ajax的每个页面。

现在这对我来说对单个文档很好，但我有以下查询

如果我希望进行类似的操作，无论何时在任何页面上执行AJAX请求，都必须显示用户“请等待以及播放动画”。我如何重写我的模块，以便我不必将DIV放在每个页面上。我该怎么办呢？
- 我希望添加一个类似的功能，但它必须在页面加载之前发生，它也应该显示进度条，我该怎么做呢
- 假设我当前的页面在3个地方使用此功能，同时，它是否会显示3请等待消息？

希望我的问题足够明确。感谢

Answer 1

有一种方法可以实现您的目标。例如，如果您使用的是PHP，则可以将HTML放在.inc或.php文件中，并将其包含在您想要的任何位置，即使在多个页面中也是如此。

因此，如果使用PHP，请尝试以下方法：

<?php //inc_loader.php ?><div id="wait" style="background-color:white;position:absolute;top:240px;left:360px;width:70px;height:50px;visibility:hidden;border: 1px solid black;padding:20px;">
 <img src="images/wait.gif" style="position:relative;top:0px;left:25px"><br /><br />Please wait...
 </div>

现在只需在任意位置包含上述文件，例如：

<?php include("inc_loader.php"); ?>

要包含的代码可能因您使用的服务器端语言而异。

2.此外，不建议在同一文档中的多个位置使用相同的代码，因为您使用id =“wait”。 id在文档中应该是唯一的，因此在多个位置使用它并不符合它的含义。如果你想避免重复，那么你可以尝试使用类，即class =“wait”，如果这可以帮助你。

如果有帮助，请告诉我们。

显示基于AJAX的请等待多个页面

1 个答案: