Ajax リクエストの繰り返しを防ぐためのソリューション

この記事では主に Ajax リクエストの繰り返し送信を防ぐための解決策を紹介します。興味のある方は参考にしてください。

ページ上に複数のボタンがあり、ボタンをクリックするとサーバーからデータを非同期に読み取ります。データ。 各ボタンのクリックによってリクエストされるページは同じですが、リクエストパラメータが異なるため、返されるコンテンツは異なります。 複数のボタンを連続してクリックすると、複数の非同期リクエストが発行されます。次に、リクエストが返される速度に応じて（ボタンのパラメータが異なり、返される内容が異なるため、速度が発生します）、データが順番に表示され、データ量が異なるため、最初にクリックされたボタンが表示されます。彼が要求したのは比較的大きいため、データは後で表示されます。

1. 問題の解決方法

この問題を解決するには 2 つの方法があります。

• 1. 複数のリクエストが連続して行われ、リクエストされた URL アドレスが同じである場合。以前のリクエストをすべて破棄し、最後のリクエストのみを実行します。

• 2. 複数のリクエストが連続して行われ、リクエストされたURLアドレスが同じである場合。後続のリクエストをすべて破棄し、最初のリクエストのみを実行します。

2. 解決策

1. ajax リクエストの async を false に設定します

$.ajax({ 
 async: false, 
 type : "POST", 
 url : defaultPostData.url, 
 dataType : 'json', 
 success : function(data) { 

 } 
});

async

• と入力します。ブール値

• デフォルト値: true。デフォルトでは、すべてのリクエストは非同期です。同期リクエストを送信する必要がある場合は、このオプションを false に設定します。

• 同期リクエストはブラウザをロックするため、他のユーザー操作はリクエストが完了するまで待ってから実行する必要があることに注意してください。

2. jquery ajaxPrefilter を使用してリクエストを中断します

最初の解決策は曲線を通じて国を救うための単なる方法であるため、実際には上記の問題を実際には解決しません。したがって、この方法を使用することをお勧めします。

 var pendingRequests = {};
 $.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
  var key = options.url;
  console.log(key);
  if (!pendingRequests[key]) {
   pendingRequests[key] = jqXHR;
  }else{
   //jqXHR.abort(); //放弃后触发的提交
   pendingRequests[key].abort(); // 放弃先触发的提交
  }

  var complete = options.complete;
  options.complete = function(jqXHR, textStatus) {
   pendingRequests[key] = null;
   if ($.isFunction(complete)) {
   complete.apply(this, arguments);
   }
  };
 });

プレフィルターは、各リクエストと $.ajax() がそれらを処理する前に送信されるプレフィルターです。

• options は、Ajax メソッドに提供される未変更のオプションとしての要求されたオプション

• です。したがって、ajaxSettings 設定にはデフォルト値はありません

• jqXHRリクエストされた jqXHR オブジェクトです

上記の内容の中心的な考え方は、リクエストを送信するときに、リクエストがキューに追加され、リクエストが応答された後にクリアされます。これにより、常に同じリクエストが 1 つだけ送信されるようになります。

は、jquery の ajax リクエストを防ぐ単なるフロントエンドです。非jquery ajaxリクエストでは機能しません。 jqueryのajaxPreFilter関数を使用しているため、jqueryのajaxリクエストに対してのみ動作します。

abortを呼び出した後、jqueryはerrorメソッドを実行し、abort例外情報をスローします。このタイプの例外は、次の方法を使用して区別できます。

var ajax = $.ajax({
 'error':function(jqXHR, textStatus, errorThrown){
  if(errorThrown != 'abort'){
   //ajax被调用abort后执行的方法
   alert('您的ajax方法被停止了');
  }
 }
})

3. デモ

ボタンが複数回クリックされるたびにリクエストがバックエンドに送信され、最後にクリックされたリクエストのみが成功することが保証されます。

rreee 以上が皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。

関連記事:

AjaxでJSONを転送するサンプルコード

ajaxはjsonを利用してデータ送信を実現

Spring MVCフロントエンドとバックエンド間の5つのajax対話メソッド

以上がAjax リクエストの繰り返しを防ぐためのソリューションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。