Question

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

期望的结果：

我想显示“loader”，即“select_add_user”.change被调用。我希望加载器保持不变，直到脚本（包括ajax）完成。

实际结果：

ajax在没有显示加载器的情况下加载FIRST，然后在“#select_sub_group”上加载。在脚本附加我的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>

把我的大脑放在这个上面......它要么真的很简单，要么真的很难......哈哈

Answer 1

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

Answer 2

将此$("#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");
}

Answer 3

使用beforeSend回调启动加载程序，然后使用complete回调来停止加载程序。

http://api.jquery.com/jQuery.ajax/

Answer 4

您的微调器的容器在HTML中应如下所示：

<div id="loader" style="display:none"></div>

显示装载程序：

$("#loader").show("fast");

隐藏加载程序：

$("#loader").hide("fast");

当AJAX工作时，JQuery加载器

4 个答案: