JavaScript を使用してリクエストが繰り返し送信されたかどうかを確認する方法

最新の Web サイトがユーザー リクエストを処理する場合、ユーザー リクエストが繰り返し送信されているかどうかを確認する必要がある場合があります。繰り返し送信すると、データの異常やシステムのクラッシュが発生する可能性があります。 JavaScript はフロントエンド開発の非常に重要な部分であり、リクエストが繰り返し送信されているかどうかを確認するのに役立ちます。この記事では、JavaScript を使用してリクエストが 2 回送信されているかどうかを確認する方法について説明します。

パート 1: 重複提出とは何ですか?

Web 開発の分野では、繰り返し送信される一般的なシナリオが 2 つあります: 1 つ目は、フォームを送信した後、ユーザーが誤ってまたは悪意を持って同じフォーム データを繰り返し送信する可能性があること、2 つ目は、ユーザーがボタンをクリックした後であることです。このとき、ネットワークの遅延やその他の問題が発生し、送信が失敗したとユーザーが誤って再送信する可能性があります。これらは重複送信につながります。

重複した送信は、データ エラーの発生や料金の増加など、アプリケーションに影響を与える可能性があり、またアプリケーションの攻撃に悪用される可能性もあります。したがって、重複提出を防ぐための措置を講じる必要があります。

パート 2: 重複した送信を防ぐにはどうすればよいですか?

繰り返し送信を防ぐために、次の措置を講じることができます:

1. CSRF トークンを追加して、悪意のある攻撃を防ぎます。

2. JavaScript を使用してフロントエンドでのユーザー入力を検証し、入力が正当であることを確認します。

3. JavaScript を使用して、ユーザーがフォームやリクエストを繰り返し送信できないようにします。

この記事では、3 番目の対策である JavaScript を使用して、ユーザーがフォームやリクエストを繰り返し送信するのを防ぐことに焦点を当てます。

パート 3: JavaScript を使用してリクエストが繰り返し送信されているかどうかを確認するにはどうすればよいですか?

このセクションでは、JavaScript を使用してリクエストが繰り返し送信されたかどうかを確認する方法を学習します。

1. フォームまたはリンクのクリック イベントで、送信ボタンまたはリンクを無効にします。これにより、リクエストが成功するまでにユーザーが送信ボタンまたはリンクを複数回クリックすることがなくなります。

2. フォームまたはリクエストを送信する前に、JavaScript を使用して同じリクエストが送信されているかどうかを確認してください。その場合は、ユーザーに再度送信しないよう促すことができます。

上記のチェックを実装するコードは次のとおりです:

function checkIfRequestSubmitted() {
  const lastRequestTime = localStorage.getItem('lastRequestTime');
  const currentRequestTime = new Date().getTime();
  const REQUEST_TIME_DELAY = 3000; // 3 seconds

  if (lastRequestTime && currentRequestTime - lastRequestTime < REQUEST_TIME_DELAY) {
    return true;
  }

  localStorage.setItem(&#39;lastRequestTime&#39;, currentRequestTime);
  return false;
}

function submitForm() {
  const form = document.getElementById(&#39;myForm&#39;);

  if (checkIfRequestSubmitted()) {
    alert(&#39;请不要重复提交！&#39;);
    return;
  }

  form.submit();
}

上記のコードは、localStorage を使用して最新のリクエストの時刻を保存します。現在の時刻と最後のリクエスト時刻の差が 3 秒未満の場合、リクエストは送信されたとみなされます。それ以外の場合は、最後のリクエストの時間を更新し、コミット操作を実行します。

最後に、フォームまたはリクエストのクリック イベントで submitForm() 関数を呼び出す必要があります。例:

<button onclick="submitForm()">提交</button>

この方法では、ユーザーが送信ボタンをクリックしたり、複数回リンクすると、JavaScript コードが時間内にチェックインされ、重複送信を防ぐことができます。

結論:

この記事では、JavaScript を使用してリクエストが 2 回送信されたかどうかを確認する方法について説明しました。送信ボタンまたはリンクを無効にし、最後のリクエストの時刻を確認することで、繰り返しの送信を効果的に防止し、ユーザー エクスペリエンスを向上させ、アプリケーションのセキュリティを保護できます。重複送信の問題は Web 開発ではよくあることなので、ユーザーのリクエストをより適切に処理するには、重複送信を防ぐ方法を念頭に置く必要があります。

以上がJavaScript を使用してリクエストが繰り返し送信されたかどうかを確認する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。