jQuery プロジェクトで重複送信を防ぐ方法

新しいプロジェクトでは、axios によって重複した送信を防ぐことができますが、古いプロジェクト (jQuery など) には axios がありません。しかし、Ajaxフックをインポートすると
それは達成できる

Ajax フックのソースコードアドレス: https://github.com/wendux/Ajax-hook

輸入

<script src="https://unpkg.com/[email protected]/dist/ajaxhook.min.js"></script>

ah オブジェクトは ajaxhook.min.js をインポートした後に表示されます。以下を使用します。

ah.proxy({
    //リクエストが開始される前にonRequestを入力します: (config, handler) => {
        コンソールログ(config.url)
        ハンドラの next(config);
    },
    //タイムアウトなどのリクエストエラーが発生したときに入力します。404 などの http ステータスコードエラーは含まれません。これらのエラーはリクエストが成功したとみなされます。onError: (err, handler) => {
        コンソールログ(エラータイプ)
        ハンドラ.next(エラー)
    },
    //リクエストが成功したら、onResponse: (response, handler) => {を入力します。
        コンソール.log(レスポンス.レスポンス)
        ハンドラ.next(レスポンス)
    }
})

このうち、config.method は ajax リクエストメソッド (GET/POST) であり、config.url はリクエストされたパスです。 onError の err オブジェクトと onResponse の応答は、err.config.method/response.config.method を通じて ajax リクエストメソッドを取得できます。

重複送信を防ぐため、少しカプセル化して js ファイルを実装しました。テスト済みで効果的です。後で友人がテストできます。専門家の皆さんは、議論したり、欠陥を指摘したりすることを歓迎します。

```javascript
関数 loadJS(url, コールバック) {
  var スクリプト = document.createElement('script');
  fn = コールバック || 関数() {};
  スクリプトタイプ = 'text/javascript';
  スクリプトを遅延させる
  //IE
  スクリプトの準備が完了している場合
    script.onreadystatechange = 関数() {
      script.readyState == 'loaded' || script.readyState == 'complete' の場合 {
        スクリプトのonreadystatechange = null;
        関数fn();
      }
    }
  } それ以外 {
    // その他のブラウザ script.onload = function() {
      関数fn();
    }
  }
  スクリプトのURLをコピーします。
  document.getElementsByTagName('body')[0].appendChild(スクリプト);
}
laodJS('https://unpkg.com/[email protected]/dist/ajaxhook.min.js', 関数() {
  ajaxArr = [] とします
  ah.proxy({
    //リクエストが開始される前にonRequestを入力します: (config, handler) => {
      var id = config.method + config.url
      (ajaxArr.indexOf(id) === -1)の場合{
        // 各リクエストに一意の ID を設定し、ajaxArr にプッシュします。リクエストが完了したら、アイテム ajaxArr.push(id) を削除します。
        ハンドラの next(config);
      } それ以外 {
        ハンドラ.reject() を返す
      }
    },
    //タイムアウトなどのリクエストエラーが発生したときに入力します。404 などの http ステータスコードエラーは含まれません。これらのエラーはリクエストが成功したとみなされます。onError: (err, handler) => {
      var id = err.config.method + err.config.url
      (ajaxArr.indexOf(id) !== -1) の場合 {
        ajaxArr.splice(ajaxArr.indexOf(id), 1)
      }
      ハンドラ.next(エラー)
    },
    //リクエストが成功したら、onResponse: (response, handler) => {を入力します。
      var id = response.config.method + response.config.url
      (ajaxArr.indexOf(id) !== -1) の場合 {
        ajaxArr.splice(ajaxArr.indexOf(id), 1)
      }
      ハンドラ.next(レスポンス)
    }
  })
})

このファイルをグローバルにインポートするだけです。このファイルに preventRepeatSubmission.js という名前を付けました。

私の HTML コード:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>ドキュメント</title>
</head>
<本文>
  <h1>これはインデックスページです</h1>
  <ul>
    <li><a href="/">/</a></li>
    <li><a href="/index">インデックスページ</a></li>
    <li><a href="/404">404 ページ</a></li>
    <li><a href="/info">情報ページ</a></li>
    <li><a href="/nofound">見つかりません</a></li>
  </ul>
  <button id="sendMsg">リクエストインターセプター</button>
  <script src="./jquery.min.js"></script>
  <!-- <script src="https://unpkg.com/[email protected]/dist/ajaxhook.min.js"></script> -->
  <script src="./preventRepeatSubmission.js"></script>
  <スクリプト>
    document.getElementById("sendMsg").addEventListener("クリック", function() {
      $.ajax({
        URL: 'http://localhost:3000/home',
        タイプ: 'GET'、
        成功: 関数(データ) {
          console.log('成功', データ)
        }
      })
    })
  </スクリプト>
</本文>
</html>

私のサーバーは koa2 を使用して構築されており、コードは次のとおりです。

const Koa = require('koa');
const Router = require('koa-router');

const app = new Koa();
定数ルーター = 新しいルーター();

ルーター
  .get('/', (ctx, next) => {
    ctx.body = '<h1>こんにちは jspang</h1>';
  })
  .get('/home', async (ctx, next) => {
    // ctx.body = '<h1>これはホームページです</h1>'
    非同期関数delay(time) {
      新しいPromise(function(resolve,reject)を返す{
        setTimeout(関数(){
          解決する（）;
        }、 時間）;
      });
    };
    遅延を待機します(5000);
    定数 url = ctx.url;
  
    // リクエスト内のリクエストパラメータを取得します。const request = ctx.request;
    リクエストクエリを定数で指定します。
    リクエストクエリ文字列を定数で指定します。

    // ctx 内の get リクエストのパラメータを取得します。const ctx_query = ctx.query;
    定数 ctx_querystring = ctx.querystring;
    ctx.body = {url、リクエストクエリ、リクエストクエリ文字列、ctx_query、ctx_query文字列};
    ctx.response.body = {status:200, msg:'パラメータが正常に取得されました'};
  })

アプリ
  .use(router.routes()) // ルートを app.use(router.allowedMethods()) に読み込みます // ミドルウェアを読み込みますapp.listen(3000, () => {
  console.log('[デモ]はポート3000で実行されています');
});

ブラウザテスト結果:

画像のボタンを押すと、Ajax リクエストが開始されます。私のサーバーは応答を 5 秒遅延しました。5 秒の遅延中にボタンを 20 回クリックしましたが、同じ 20 回の Ajax リクエストが正常にインターセプトされ、うまく機能しました。

要約する

jQuery プロジェクトで重複送信を防ぐ方法についての記事はこれで終わりです。jQuery の重複送信防止に関する関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: