在多个页面上显示基于 AJAX 请稍候答案

【问题标题】：displaying AJAX based Please Wait on multiple pages在多个页面上显示基于 AJAX 请稍候
【发布时间】：2009-07-03 07:18:42
【问题描述】：

我正在 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 Please Wait Messages？

希望我的问题足够清楚。谢谢

【问题讨论】：

您使用什么服务器端语言/框架？大多数 MVC 框架支持仅替换实际页面内容的布局。在那里，您可以将消息放置在布局中。根据您显示消息的位置，您也只能显示一次并等待所有请求完成。

标签： php mysql ajax page-loading-message

【解决方案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" 如果这可以帮助您。

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

【讨论】：