javascript - 一页上的多个 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 调用在哪里被定义)