如何使用 ajaxStart 和 ajaxStop 显示/隐藏带有进度条的 div？答案

【问题标题】：How do I show/hide a div with a progress bar using ajaxStart and ajaxStop?如何使用 ajaxStart 和 ajaxStop 显示/隐藏带有进度条的 div？
【发布时间】：2012-12-21 13:32:38
【问题描述】：

在编程方面我是个新手，所以也许这对你们来说是在公园里散步。我想创建一个带有进度条的 .gif 图像的 div，其中 div 仅应在按下按钮时显示，例如将一些设置保存到数据库。

此功能将在 GUI 中的任何地方使用，并且每次对数据库进行查询时。我正在使用 jQuery UI 进行编码，并且有人建议我使用 ajaxStart() 和 ajaxStop()，但不太清楚如何正确使用它。下面的代码只是我写的一些代码，我认为我会以某种方式走上正确的轨道，但很可能不会。

----- 脚本 -----

$(document).ready(function(){
      $("#progressContainer").ajaxStart(function(){
        $(this).html("<img src='ajax-progressbar.gif' />");
      });
      $(".clickForProgressBar").click(function(){
        $("#progressContainer").load("");
      });
    });

----- HTML -----

<button class="clickForProgressBar">Click here</button>
<div id="progressContainer"></div>

如果有人可以尝试给我一些关于如何进行的提示，我将永远感激不尽。如果你能理解我的意思；）

【问题讨论】：

在单击按钮之前，您的 HTML 中是否存在 #progressContainer？您的问题和代码暗示您也需要创建div。
另外，您的按钮类的命名与 JS 中的类名不同
是的，具有该名称的 div 存在。忘了这个，和按钮一样。现在更正了。谢谢

标签： ajax jquery-ui jquery progress-bar

【解决方案1】：

这里概述了一种方法。

首先，由于这是一个应用程序范围的策略，因此创建一个 Ajax 包装器并将该包装器用于所有调用。

接下来，在包装器中，在向服务器发出实际调用之前显示图像。

最后，当调用返回时（出于任何原因），在继续之前隐藏图像。

要记住的一个问题是您希望如何处理图像容器。例如，如果它将位于 div 标签中（正如您在上面指出的那样），您可能希望将 div 标签的 id 作为调用的一部分传递，以确保不同的 div 标签或展示位置仍然有效。或者，您可以使用在内容上弹出并显示图像的模式窗口。这将使您不必使用 div 标记，并且无需对页面的布局做出任何假设，尽管它可能会更加突兀（这可能是一件好事，具体取决于您正在做的事情）。

【讨论】：