jQueryに保留中のAjaxリクエストがあるかどうかを確認するにはどうすればよいですか?


90

作成したjQueryコントロールに問題があります。探しているアイテムのIDを入力できるドロップダウンリストがあり、テキストボックスでEnterキーを押すかフォーカスを失うと、jQueryを介して入力したIDが正しいことが検証され、そうであればアラートが表示されますない

問題は、一般ユーザーが無効な値を入力して送信ボタンを押してフォーカスを失うと、フォームの送信が送信された後にjQueryポストが戻るということです。

フォームの送信を許可しないように、jQueryによる非同期要求処理があるかどうかを確認できる方法はありますか?

回答:


37

ajaxStartajaxStopを使用して、リクエストがいつアクティブになるかを追跡できます。


私のコントロールはHtmlHelperを使用して何度もレンダリングされていたので、これは私にとってよりうまくいきました。どうも!
サバニート2009年

これは私のために働いた!私はajaxSendとajaxSuccessを使用していましたが、いくつかのajaxリクエストが送信されることがあり、コードの一部を最初と最後に1回だけ実行したいと思っていました。ajaxStartとajaxStopはまさに私が探していたものです!ありがとう
ScottyG 2018年

2
2019年のリンクは古くなっています
クリスチャンニッセン


25
 $(function () {
        function checkPendingRequest() {
            if ($.active > 0) {
                window.setTimeout(checkPendingRequest, 1000);
                //Mostrar peticiones pendientes ejemplo: $("#control").val("Peticiones pendientes" + $.active);
            }
            else {

                alert("No hay peticiones pendientes");

            }
        };

        window.setTimeout(checkPendingRequest, 1000);
 });

良い解決策のようですが、「最大コールスタックサイズ」の問題を検出しましたか?
ミケル2017

11

$ .ajax()関数はXMLHttpRequestオブジェクトを返します。送信ボタンの「OnClick」イベントからアクセスできる変数にそれを保存します。送信クリックが処理されたら、XMLHttpRequest変数が次のようになっているかどうかを確認します。

1)null、要求がまだ送信されていないことを意味します

2)readyState値が4(ロード済み)であること。これは、リクエストが送信され、正常に返されたことを意味します。

どちらの場合も、trueを返し、送信を続行できるようにします。それ以外の場合は、falseを返して送信をブロックし、送信が機能しなかった理由をユーザーに示します。:)


4
nullをチェックしてリクエストオブジェクトが存在するかどうかを判別することは重要ですが、nullでない場合は、実際にチェックrequest.readyState > 0 && request.readyState < 4して「アクティブ」リクエストを判別する必要があります。。
ネイサンテイラー

1

当社は、利用する必要が$ .ajax.abort()要求がアクティブである場合にアボート要求に方法を。このpromiseオブジェクトは、readyStateプロパティを使用して、リクエストがアクティブかどうかを確認します。

HTML

<h3>Cancel Ajax Request on Demand</h3>
<div id="test"></div>
<input type="button" id="btnCancel" value="Click to Cancel the Ajax Request" />

JSコード

//Initial Message
var ajaxRequestVariable;
$("#test").html("Please wait while request is being processed..");

//Event handler for Cancel Button
$("#btnCancel").on("click", function(){
if (ajaxRequestVariable !== undefined)

if (ajaxRequestVariable.readyState > 0 && ajaxRequestVariable.readyState < 4)
{
  ajaxRequestVariable.abort();
  $("#test").html("Ajax Request Cancelled.");
}
});

//Ajax Process Starts
ajaxRequestVariable = $.ajax({
            method: "POST",
            url: '/echo/json/',
            contentType: "application/json",
            cache: false,
            dataType: "json",
            data: {
        json: JSON.encode({
         data:
             [
                            {"prop1":"prop1Value"},
                    {"prop1":"prop2Value"}
                  ]         
        }),
        delay: 11
    },

            success: function (response) {
            $("#test").show();
            $("#test").html("Request is completed");           
            },
            error: function (error) {

            },
            complete: function () {

            }
        });
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.