1

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

期望的结果：

我想在调用“select_add_user”.change 时显示“加载器”。我希望加载程序保持原样，直到脚本（包括 ajax）完成。

实际结果：

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>

在这个问题上绞尽脑汁..要么真的很简单，要么真的很难..哈哈

4

4 回答 4

1

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

于 2012-07-11T19:05:50.340 回答
0

把它$("#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-11T16:59:37.270 回答
0

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

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

于 2012-07-11T17:00:05.047 回答
0

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

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

显示加载器：

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

隐藏加载器：

$("#loader").hide("fast");
于 2012-07-11T17:01:12.397 回答