AJAX工作时的JQuery加载器

我遇到的问题是AJAX是JQuery函数中的主要操作。我想这段代码是线性的，异步似乎没有效果。我想要做的是显示一个“加载器”，然后在脚本完成时隐藏这个“加载器”。我有很多其他的实例，但没有AJAX调用。相反，我使用$ .post，但对于这个特定的实例$ .ajax更好地满足了我的需求。AJAX工作时的JQuery加载器

期望的结果：

我想显示“加载”即时“select_add_user” .change之称。我希望加载器保持放置直到脚本（包括ajax）完成。

实际结果：

阿贾克斯首先加载，甚至没有显示加载器，然后在“#select_sub_group” .append装载机显示了一毫秒，而脚本追加我的HTML。

这里是我的脚本：

<script type="text/javascript"> 

$("#select_user_add").change(function(){ 
$("#loader:hidden").show("fast"); 
$('#select_sub_group').html(''); 
var appendD = ""; 
txt=$("#select_user_add").val(); 

    $.ajax({ 
    async: false, // For async, so it finishes running 
    url: "get_ug.php", 
    data: { 
    id: txt 
    }, 
    type: "POST", 
    dataType: "json", 
    success: function(data){ 
     $.each(data, function() { 
     appendD = appendD + '<option id="usg' + this.id + '" value="' + this.id + '">' + this.label + '</option>'; 
     $('#lgroup_' + this.id).css('background-color', '#CCFFCC'); 
     }); 

    } 

}); 
$('#select_sub_group').append(appendD); 
$("#loader").hide("fast"); 

    }); 
</script>

货架我的大脑就这一个..这是不是很简单的，否则真的很难..哈哈

来源

2012-07-11 Zak

我将删除'async：false'并将'$（'＃loader'）。hide（“fast”）;'放入您的'success'函数中。 – lbstr 2012-07-11 16:58:46

@lbstr - 请提交一个非常快速的答案..我想给你“绿色复选标记”。谢谢！ – Zak 2012-07-11 17:23:40

不客气！我已经添加了答案。没有什么比我的评论复制/粘贴，但它听起来像你的想法.. – lbstr 2012-07-11 19:06:42

我会删除async: false并将$('#loader').hide("fast");放入您的成功功能中。

来源

2012-07-11 19:05:50 lbstr

将这个$("#loader").hide("fast");的success:函数内。

success: function(data){ 
    $.each(data, function() { 
    appendD = appendD + '<option id="usg' + this.id + '" value="' + this.id + '">' + this.label + '</option>'; 
    $('#lgroup_' + this.id).css('background-color', '#CCFFCC'); 
    }); 
    $("#loader").hide("fast"); 
}

来源

2012-07-11 16:59:37

我把它移到里面，没有任何效果。 – Zak 2012-07-11 17:10:13

'onclick'函数在哪里，给出'$（“＃loader：hidden”）。show（“fast”）;'！ – 2012-07-11 17:12:35

如果你看看在$（“＃select_user_add”）之后直接调用的代码的顶部变化 - 与.click相同，但是它是一个

AJAX工作时的JQuery加载器

回答