So verhindern Sie doppelte Übermittlungen in einem JQuery-Projekt
|
In neuen Projekten kann Axios doppelte Übermittlungen verhindern, aber alte Projekte (wie jQuery) haben kein Axios. Aber Ajax-Hook importieren Adresse des Ajax-Hook-Quellcodes: https://github.com/wendux/Ajax-hook Import <script src="https://unpkg.com/[email protected]/dist/ajaxhook.min.js"></script> Das ah-Objekt wird nach dem Importieren von ajaxhook.min.js angezeigt. Verwenden Sie:
ah.proxy({
//Geben Sie onRequest ein, bevor die Anfrage initiiert wird: (config, handler) => {
konsole.log(Konfigurations-URL)
handler.next(Konfiguration);
},
//Geben Sie ein, wenn ein Anforderungsfehler auftritt, z. B. ein Timeout. Beachten Sie, dass hiervon keine HTTP-Statuscodefehler wie 404 erfasst werden. In diesem Fall wird die Anforderung trotzdem als erfolgreich betrachtet. onError: (err, handler) => {
console.log(Fehlertyp)
handler.next(fehler)
},
//Nachdem die Anfrage erfolgreich war, geben Sie onResponse: (response, handler) => { ein.
Konsole.log(Antwort.Antwort)
handler.next(Antwort)
}
})
Darunter ist config.method die Ajax-Anforderungsmethode (GET/POST) und config.url der angeforderte Pfad. Das Err-Objekt in onError und die Antwort in onResponse können die Ajax-Anforderungsmethode über err.config.method/response.config.method erhalten. Ich habe es ein wenig gekapselt und eine JS-Datei implementiert, um doppelte Übermittlungen zu verhindern. Es wurde getestet und ist wirksam. Freunde können es später testen. Alle Experten sind herzlich eingeladen, darüber zu diskutieren und auf Mängel hinzuweisen.
```Javascript
Funktion loadJS(URL, Rückruf) {
var Skript = Dokument.createElement('Skript');
fn = Rückruf || Funktion() {};
script.type = "text/javascript";
Skript.defer = wahr;
//IE
wenn (script.readyState) {
script.onreadystatechange = Funktion() {
if (script.readyState == 'geladen' || script.readyState == 'abgeschlossen') {
script.onreadystatechange = null;
fn();
}
}
} anders {
// Andere Browser script.onload = function() {
fn();
}
}
script.src = URL;
document.getElementsByTagName('body')[0].appendChild(script);
}
laodJS('https://unpkg.com/[email protected]/dist/ajaxhook.min.js', Funktion() {
lass ajaxArr = []
ah.proxy({
//Geben Sie onRequest ein, bevor die Anfrage initiiert wird: (config, handler) => {
var id = Konfigurationsmethode + Konfigurations-URL
wenn (ajaxArr.indexOf(id) === -1) {
// Legen Sie für jede Anfrage eine eindeutige ID fest und übertragen Sie sie an ajaxArr. Wenn die Anfrage abgeschlossen ist, entfernen Sie das Element ajaxArr.push(id)
handler.next(Konfiguration);
} anders {
Rückgabehandler.Ablehnen()
}
},
//Geben Sie ein, wenn ein Anforderungsfehler auftritt, z. B. ein Timeout. Beachten Sie, dass hiervon keine HTTP-Statuscodefehler wie 404 erfasst werden. In diesem Fall wird die Anforderung trotzdem als erfolgreich betrachtet. onError: (err, handler) => {
var id = err.config.method + err.config.url
wenn (ajaxArr.indexOf(id) !== -1) {
ajaxArr.splice(ajaxArr.indexOf(id), 1)
}
handler.next(fehler)
},
//Nachdem die Anfrage erfolgreich war, geben Sie onResponse: (response, handler) => { ein.
var id = response.config.method + response.config.url
wenn (ajaxArr.indexOf(id) !== -1) {
ajaxArr.splice(ajaxArr.indexOf(id), 1)
}
handler.next(Antwort)
}
})
})
Importieren Sie diese Datei einfach global. Ich habe diese Datei preventRepeatSubmission.js genannt. Mein HTML-Code:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
</Kopf>
<Text>
<h1>Dies ist die Indexseite</h1>
<ul>
<li><a href="/">/</a></li>
<li><a href="/index">Indexseite</a></li>
<li><a href="/404">404-Seite</a></li>
<li><a href="/info">Infoseite</a></li>
<li><a href="/nofound">nicht gefunden</a></li>
</ul>
<button id="sendMsg">Abfangjäger anfordern</button>
<script src="./jquery.min.js"></script>
<!-- <script src="https://unpkg.com/[email protected]/dist/ajaxhook.min.js"></script> -->
<script src="./preventRepeatSubmission.js"></script>
<Skript>
document.getElementById("sendMsg").addEventListener("klicken", function() {
$.ajax({
URL: „http://localhost:3000/home“,
Typ: 'GET',
Erfolg: Funktion (Daten) {
console.log('Erfolg', Daten)
}
})
})
</Skript>
</body>
</html>
Mein Server basiert auf koa2, der Code lautet wie folgt:
const Koa = erfordern('koa');
const Router = erforderlich('koa-router');
const app = new Koa();
const router = neuer Router();
Router
.get('/', (ctx, weiter) => {
ctx.body = '<h1>hallo jspang</h1>';
})
.get('/home', async (ctx, weiter) => {
// ctx.body = '<h1>Dies ist die Homepage</h1>'
asynchrone Funktion Verzögerung(Zeit) {
returniere neues Promise(Funktion(auflösen, ablehnen) {
setzeTimeout(Funktion(){
lösen();
}, Zeit);
});
};
Warte auf Verzögerung (5000);
Konstanten-URL = ctx.URL;
// Die Anforderungsparameter in der Anforderung abrufen const request = ctx.request;
const request_query = Anfrage.Abfrage;
const request_querystring = Anfrage.querystring;
// Parameter der Get-Anfrage in ctx abrufen const ctx_query = ctx.query;
const ctx_querystring = ctx.querystring;
ctx.body = {URL, Anforderungsabfrage, Anforderungsabfragezeichenfolge, ctx_query, ctx_queryzeichenfolge};
ctx.response.body = {status:200, msg:'Parameter wurden erfolgreich abgerufen'};
})
App
.use(router.routes()) // Routen in app laden.use(router.allowedMethods()) // Middleware ladenapp.listen(3000, () => {
console.log('[Demo] läuft auf Port 3000');
});
Ergebnisse des Browsertests:
Durch Drücken der Schaltfläche im Bild wird eine Ajax-Anfrage initiiert. Mein Server verzögerte die Antwort um 5 Sekunden. Während der 5-sekündigen Verzögerung klickte ich 20 Mal auf die Schaltfläche und dieselben 20 Ajax-Anfragen wurden erfolgreich abgefangen, was gut funktionierte. Zusammenfassen Dies ist das Ende dieses Artikels zum Verhindern doppelter Übermittlungen in JQuery-Projekten. Weitere relevante Inhalte zum Thema „Verhindern doppelter Übermittlungen“ in JQuery finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! Das könnte Sie auch interessieren:
|
<<: Fallstricke bei langsamen MySQL-Abfragen
>>: Lösung zur Schnittstellenverformung beim Einstellen der Frameset-Höhe
Artikel empfehlen
Methode zur Verhinderung von SSH-Cracking auf Linux-Servern (empfohlen)
1. Der Linux-Server konfiguriert /etc/hosts.deny ...
Beherrschen Sie die häufig verwendeten HTML-Tags zum Zitieren von Inhalten auf Webseiten.
Verwenden Sie „blockquote“ für lange Zitate, „q“ ...
Detaillierte Erläuterung von MySQL-Unterabfragen (verschachtelte Abfragen), Verknüpfungstabellen und kombinierten Abfragen
1. Unterabfrage MySQL 4.1 und höher unterstützen ...
Lösung für den erfolgreichen Start von MySQL, aber ohne Überwachung des Ports
Problembeschreibung MySQL wurde erfolgreich gesta...
Einführung in die Cloud-native-Technologie Kubernetes (K8S)
Inhaltsverzeichnis 01 Was ist Kubernetes? 02 Der ...
Webdesign: Implementierungstechniken für Webmusik
<br />Wenn Sie Musik in eine Webseite einfüg...
Zusammenfassung der bei der Implementierung von Vue-Plugins aufgetretenen Probleme
Inhaltsverzeichnis Szeneneinführung Plugin-Implem...
Detaillierte Erklärung der neuen Funktion ROLE in MySQL 8
Welche Probleme löst MySQL ROLE? Wenn Sie ein DBA...
Docker entfernt abnormale Containervorgänge
Dieser Neuling ist auf ein solches Problem gestoß...
Detaillierte Erklärung der Docker-Datenspeichervolumes
Standardmäßig erfolgt das Lesen und Schreiben von...
Detailliertes Tutorial zum Herunterladen und Installieren von VMware Workstation
Virtuelle Maschinen sind eine sehr praktische Tes...
Detaillierte Anweisungen zur Installation von SuPHP auf CentOS 7.2
Standardmäßig wird PHP unter CentOS 7 als Apache ...
Tutorial zum Erstellen einer persönlichen NextCloud-Netzwerkfestplatte mit Docker
Inhaltsverzeichnis 1. Einleitung 2. Bereitstellun...
Implementierung zum Hinzufügen von Bemerkungsinformationen zu MySQL
Vorwort Einige Leute haben mich in diesen Tagen u...