ホームページ >ウェブフロントエンド >jsチュートリアル >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 オブジェクトです
abortを呼び出した後、jqueryはerrorメソッドを実行し、abort例外情報をスローします。このタイプの例外は、次の方法を使用して区別できます。 var ajax = $.ajax({
'error':function(jqXHR, textStatus, errorThrown){
if(errorThrown != 'abort'){
//ajax被调用abort后执行的方法
alert('您的ajax方法被停止了');
}
}
})3. デモ
rreee 以上が皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。
関連記事:AjaxでJSONを転送するサンプルコード
Spring MVCフロントエンドとバックエンド間の5つのajax対話メソッド
以上がAjax リクエストの繰り返しを防ぐためのソリューションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。