jQuery 插件在等待 AJAX 响应时显示 "loading"

Question

我编写了一些 jQuery ajax 代码，当下拉选项更改时，我会向服务器发送请求。基于此更改，4 或 5 个文本字段会更改其数据，并加载一堆新图像。一切都感觉很漂亮。

但我想知道 jQuery 是否提供了一个插件，可以使页面变暗...显示“正在加载”或旋转器，直到请求从服务器返回？我记得在附近看到过一个，但找不到它。

Answer 1

您可以将两个对象传递给通用 ajax 对象，分别为 ajaxStart 和 ajaxStop。这些是每当发送和接收 ajax 查询时就会触发的事件处理程序。

ajaxStart (Global Event)
This event is broadcast if an Ajax request is started and no other Ajax requests are currently running.

ajaxStop (Global Event)
This global event is triggered if there are no more Ajax requests being processed.

考虑到这一点，设置您想要的内容就相当容易了:

$("#loading").bind("ajaxStart", function(){
    $(this).show();
}).bind("ajaxStop", function(){
    $(this).hide();
});

只要让你的 #loading div 随心所欲 - 看看众多的灯箱插件或 BlockUI实现您所要求的目标。

当然，您可以将其设置为执行您喜欢的任何操作，但是一旦在脚本顶部设置完毕，就可以一劳永逸了。

如果您使用的是 BlockUI 插件，那么您所要做的就是:

$().ajaxStart($.blockUI).ajaxStop($.unblockUI);