Javascript 一页上有多个Ajax加载指示器

我有一个包含两个单独表单的页面，可以通过Ajax（jQuery）提交。对于这些表单中的每一个，我都希望向用户显示一个加载指示器。我发现了一段很好的代码，可以很容易地显示这些图标，但它只在有一个表单时起作用

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

ajaxloader是一个类，它将加载的图像显示为CSS背景图像。要使用它，我只需要添加如下内容：

Busy…

当我用我的页面（有两个表单）测试这个时，我提交了两个表单中的一个，然后两个加载指示器都出现了（这很明显）。现在我的问题是，如何显示需要显示的指示器？我正在考虑给span标记一个id属性，但是我不知道如何继续。我希望这是尽可能通用的，所以我不必硬编码和重复代码很多

---

谢谢

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

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

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

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

您可以将“show loading indicator”回调附加到ajax查询本身，而不是像当前的解决方案那样执行“一网打尽”

在您的

$.ajax（）调用中类似于以下内容：

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

（对于第二个表单，无论定义了Ajax调用，都有一个类似的表单）
您检查过这个吗？？？在单击submit按钮时显示加载指示器并不能保证Ajax请求已经实际启动，因此现在显示指示器是没有意义的。（可能是客户端验证阻止了表单的提交。）这可能是最简单的方法。谢谢