web-dev-qa-db-ja.com

特定のajax呼び出しで.ajaxStart（）を呼び出す方法

サイトのドキュメントでajaxのステータスに応じて進行状況バーを表示または非表示にするajax呼び出しがあります

  $(document).ajaxStart(function(){ 
        $('#ajaxProgress').show(); 
    });
  $(document).ajaxStop(function(){ 
        $('#ajaxProgress').hide(); 
    });

私は基本的に、サイトの他の部分でこれらのメソッドを上書きします。そこでは、多くの素早い小さなajax呼び出しが行われ、プログレスバーを出し入れする必要はありません。私はそれらを他の$ .getJSONおよび$ .ajax呼び出しにアタッチまたは挿入しようとしています。私はそれらを連鎖させようとしましたが、明らかにそれは良くありません。

$.getJSON().ajaxStart(function(){ 'kill preloader'});
jqueryajaxprogress-barpreloader
47
kevzettler

2018注：この回答は廃止されました。この回答を編集することをお勧めします。

カスタム名前空間を使用して、ajaxStartとajaxStopをバインドできます。

$(document).bind("ajaxStart.mine", function() {
    $('#ajaxProgress').show();
});

$(document).bind("ajaxStop.mine", function() {
    $('#ajaxProgress').hide();
});

次に、サイトの他の部分で、.jsonが呼び出す前にbeforeそれらを一時的にバインド解除します。

$(document).unbind(".mine");

答えを探しているときに here からアイデアを得ました。

EDIT：悲しいかな、テストする時間がありませんでした。

35
montrealist

これをajaxアクションを処理する関数に配置すると、適切な場合にのみバインドされます。

$('#yourDiv')
    .ajaxStart(function(){
        $("ResultsDiv").hide();
        $(this).show();
    })
    .ajaxStop(function(){
        $(this).hide();
        $(this).unbind("ajaxStart");
    });
15
Jason Rikard

オプションオブジェクトに属性があります。ajax（）はglobalと呼ばれます。

falseに設定した場合、コールのajaxStartイベントはトリガーされません。

    $.ajax({
        url: "google.com",
        type: "GET",
        dataType: "json",
        cache: false,
        global: false, 
        success: function (data) {
15
Hasnat Safder

ローカルスコープのAjaxイベントを使用する

                success: function (jQxhr, errorCode, errorThrown) {
                    alert("Error : " + errorThrown);
                },
                beforeSend: function () {
                    $("#loading-image").show();
                },
                complete: function () {
                    $("#loading-image").hide();
                }
9
Ramya Muthukumar

さらに、.ajaxStart()および.ajaxStop()への呼び出しをdisableしたい場合は、global.ajax()リクエストのfalseのオプション;）

詳細はこちらをご覧ください： 特定のajax呼び出しで.ajaxStart（）を呼び出す方法

7
GxiGloN

残念ながら、ajaxStartイベントには、アニメーションを表示するかどうかを決定するために使用できる追加情報がありません。

とにかく、ここに一つのアイデアがあります。 ajaxStartメソッドで、200ミリ秒後にアニメーションを開始してみませんか？ ajaxリクエストが200ミリ秒で完了する場合、アニメーションは表示されません。それ以外の場合はアニメーションが表示されます。コードは次のようになります。

var animationController = function animationController()
{
    var timeout = null;
    var delayBy = 200; //Number of milliseconds to wait before ajax animation starts.

    var pub = {};

    var actualAnimationStart = function actualAnimationStart()
    {
        $('#ajaxProgress').show();
    };

    var actualAnimationStop = function actualAnimationStop()
    {
        $('#ajaxProgress').hide();
    };

    pub.startAnimation = function animationController$startAnimation() 
    { 
        timeout = setTimeout(actualAnimationStart, delayBy);
    };

    pub.stopAnimation = function animationController$stopAnimation()
    {
        //If ajax call finishes before the timeout occurs, we wouldn't have 
        //shown any animation.
        clearTimeout(timeout);
        actualAnimationStop();
    }

    return pub;
}();


$(document).ready(
    function()
    {
        $(document).ajaxStart(animationController.startAnimation);
        $(document).ajaxStop(animationController.stopAnimation);
    }
 );
4
SolutionYogi

beforeSendを使用するか、このような方法でajax呼び出しでコールバック関数を完了します.....実例はこちら https://stackoverflow.com/a/34940340/5361795

ソース ShoutingCode

2
Zigri2612

解決策があります。 showloaderと呼ばれるグローバルjs変数を設定します（デフォルトではfalseに設定されています）。ローダーに表示する関数のいずれかで、ajax呼び出しを行う前に、ローダーをtrueに設定するだけです。

function doAjaxThing()
{
    showloader=true;
    $.ajax({yaddayadda});
}

次に、私は私の頭のセクションに次のものがあります。

$(document).ajaxStart(function()
{
    if (showloader)
    {
        $('.loadingholder').fadeIn(200);
    }
});    

$(document).ajaxComplete(function() 
{
    $('.loadingholder').fadeOut(200);
    showloader=false;
});
1
Ollie Brooke
<div class="Local">Trigger</div>

<div class="result"></div>
<div class="log"></div>

$(document).ajaxStart(function() {
$( "log" )text( "Trigger Fire successfully." );
});

$( ".local" ).click(function() {
$( ".result" ).load("c:/refresh.html.");
});

ユーザーがクラスLocalの要素をクリックしてAjaxリクエストが送信されると、ログメッセージが表示されます。

0
Praveen04

処理を決定する前にリクエストを確認する場合は、ajaxSendとajaxCompleteを使用します。ここで私の返信を参照してください： https://stackoverflow.com/a/15763341/117268

0
Emil Stenström