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加載器

回答