3

我有一个包含 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 属性，但后来我不知道如何继续。我希望它尽可能通用，因此我不必大量硬编码和重复代码。

谢谢！

4

2 回答 2

3

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

在你的$.ajax()电话中是这样的：

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

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

于 2012-07-17T10:17:36.993 回答
1

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

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

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

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

于 2012-07-17T10:16:28.023 回答