Heim  >  Artikel  >  Web-Frontend  >  So überprüfen Sie mithilfe von JavaScript, ob eine Anfrage wiederholt gesendet wurde

So überprüfen Sie mithilfe von JavaScript, ob eine Anfrage wiederholt gesendet wurde

PHPz
PHPzOriginal
2023-04-25 10:47:53708Durchsuche

Wenn moderne Websites Benutzeranfragen verarbeiten, müssen sie manchmal prüfen, ob die Benutzeranfrage wiederholt gesendet wurde. Wiederholte Übermittlungen können zu Datenanomalien oder Systemabstürzen führen. JavaScript ist ein sehr wichtiger Bestandteil der Frontend-Entwicklung und kann uns helfen zu überprüfen, ob Anfragen wiederholt eingereicht werden. In diesem Artikel besprechen wir, wie Sie mithilfe von JavaScript prüfen können, ob eine Anfrage zweimal gesendet wurde.

Teil 1: Was ist eine doppelte Einreichung?

Im Bereich der Webentwicklung gibt es zwei häufige Szenarien für wiederholte Übermittlungen: Erstens kann der Benutzer nach dem Absenden des Formulars versehentlich oder böswillig dieselben Formulardaten erneut übermitteln, zweitens, wenn der Benutzer auf eine Schaltfläche oder einen Link klickt. Beim Benutzer können Netzwerkverzögerungen oder andere Probleme auftreten, die dazu führen, dass Benutzer fälschlicherweise glauben, dass die Übermittlung nicht erfolgreich war, und dann erneut übermitteln. Dies führt zu doppelten Einreichungen.

Doppelte Einreichungen können Auswirkungen auf die Anwendung haben, z. B. Datenfehler verursachen, höhere Gebühren verursachen oder für Angriffe auf die Anwendung ausgenutzt werden. Daher müssen wir Maßnahmen ergreifen, um doppelte Einreichungen zu verhindern.

Teil 2: Wie verhindere ich doppelte Einreichungen?

Um wiederholte Übermittlungen zu verhindern, können wir folgende Maßnahmen ergreifen:

1. Fügen Sie CSRF-Tokens hinzu, um böswillige Angriffe zu verhindern.

2. Verwenden Sie JavaScript, um Benutzereingaben im Frontend zu überprüfen und sicherzustellen, dass die Eingaben zulässig sind.

3. Verwenden Sie JavaScript, um zu verhindern, dass Benutzer wiederholt Formulare oder Anfragen senden.

In diesem Artikel konzentrieren wir uns auf die dritte Maßnahme, die darin besteht, mithilfe von JavaScript zu verhindern, dass Benutzer wiederholt Formulare oder Anfragen senden.

Teil 3: Wie kann ich mit JavaScript überprüfen, ob eine Anfrage wiederholt gesendet wird?

In diesem Abschnitt erfahren Sie, wie Sie mithilfe von JavaScript überprüfen, ob eine Anfrage zweimal gesendet wurde.

1. Deaktivieren Sie im Klickereignis des Formulars oder Links die Schaltfläche „Senden“ oder den Link. Dadurch wird verhindert, dass der Benutzer mehrmals auf die Schaltfläche „Senden“ oder den Link klickt, bevor die Anfrage erfolgreich ist.

2. Überprüfen Sie vor dem Absenden eines Formulars oder einer Anfrage mithilfe von JavaScript, ob dieselbe Anfrage gesendet wurde. Wenn dies der Fall ist, können Sie den Benutzer auffordern, die Übermittlung nicht erneut vorzunehmen.

Das Folgende ist der Code zum Implementieren der obigen Prüfung:

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();
}

Der obige Code verwendet localStorage, um die Zeit der letzten Anfrage zu speichern. Beträgt die Differenz zwischen der aktuellen Uhrzeit und der letzten Anfragezeit weniger als 3 Sekunden, gilt die Anfrage als übermittelt. Andernfalls aktualisieren Sie die Zeit der letzten Anforderung und führen Sie den Festschreibungsvorgang durch.

Schließlich müssen wir die Funktion „submitForm()“ im Click-Ereignis des Formulars oder der Anfrage aufrufen, zum Beispiel:

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

Auf diese Weise kann der JavaScript-Code auch dann funktionieren, wenn der Benutzer mehrmals auf die Schaltfläche „Senden“ oder den Link klickt Check-in-Zeit, um wiederholte Einreichungen zu verhindern.

Fazit:

In diesem Artikel haben wir besprochen, wie Sie mithilfe von JavaScript überprüfen können, ob eine Anfrage zweimal gesendet wurde. Indem wir die Schaltflächen oder Links zum Senden deaktivieren und den Zeitpunkt der letzten Anfrage überprüfen, können wir wiederholte Übermittlungen effektiv verhindern, die Benutzererfahrung verbessern und die Anwendungssicherheit schützen. Probleme mit doppelten Übermittlungen kommen in der Webentwicklung häufig vor. Daher müssen wir Möglichkeiten zur Vermeidung doppelter Übermittlungen im Auge behalten, um Benutzeranfragen besser bearbeiten zu können.

Das obige ist der detaillierte Inhalt vonSo überprüfen Sie mithilfe von JavaScript, ob eine Anfrage wiederholt gesendet wurde. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn