1 页上的多个 Ajax 加载指示器

Question

我有一个包含 2 个单独表单的页面，可以通过 Ajax (jQuery) 提交。对于这些表单中的每一个，我想向用户显示一个加载指示器。我找到了一段很好的代码，可以轻松显示这些图标，但它只在有 1 个表单时才有效。

$('.ajaxloader').hide().ajaxStart(function () { 
    $(this).show(); 
}).ajaxStop(function () {
    $(this).hide(); 
});

ajaxloader 是一个将加载图像显示为 CSS 背景图像的类。要使用它，我只需要添加类似：<span class="ajaxLoader">Busy ...</span>

当我用我的页面（有 2 个表单）进行测试并提交其中一个时，两个加载指示器都会出现（这很明显）。现在我的问题是，如何显示需要显示的指标？我正在考虑给 span-tag 一个 id 属性，但后来我不知道如何继续。我希望它尽可能通用，这样我就不必大量硬编码和重复代码。

谢谢！

Answer 1

您可以将“显示加载指示器”回调附加到 Ajax 查询本身，而不是像您当前的解决方案那样“包罗万象”。

在您的$.ajax() 通话中类似这样的内容：

$.ajax("/form1/target", {
    beforeSend: function() {
        $(".ajax-loader-1").show();
    },
    complete: function() {
        $(".ajax-loader-1").hide();
    }
});

（与您的第二种形式类似，只要定义了 Ajax 调用）

Answer 2

您是否考虑过在您的表单提交时启动它并隐藏另一个。

$('.yourSubmitButton').click(function () {
    $(this).parent().find('.ajaxLoader').show();
});

$('.ajaxloader').hide().ajaxStop(function () {
    $(this).hide(); 
});

所以加载器将显示在刚刚提交的表单中（我假设您正在使用按钮或链接进行提交？）然后当 ajax 请求停止时，两者都会再次隐藏。