1

AJAX が JQuery 関数の主要なアクションであることに問題があります。このコードをある程度線形にしたいと思いますが、非同期は効果がないようです。私がやろうとしているのは、「ローダー」を表示し、スクリプトが終了したらその「ローダー」を非表示にすることです。これには他にも多くのインスタンスがありますが、AJAX 呼び出しはありません。代わりに $.post を使用しましたが、この特定のインスタンスでは $.ajax の方が私のニーズを満たしています。

望ましい結果:

「select_add_user」.change が呼び出された瞬間に「loader」を表示したいと思います。スクリプト (ajax を含む) が完了するまで、ローダーをそのままにしておきたいと思います。

実結果：

ajax は、ローダーを表示することさえせずに FIRST をロードし、次に "#select_sub_group".append で、スクリプトが HTML を追加している間、ローダーが 1 ミリ秒間表示されます。

これが私のスクリプトです：

<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 に答える