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

您可以将“show loading indicator”回调附加到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请求停止时，两者都会再次隐藏。

1页上有多个Ajax加载指示符

2 个答案: