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
DHTML-Objekte (gemeinsame Eigenschaften verschiedener HTML-Objekte)
!DOCTYPE Gibt die Document Type Definition (DTD) ...
Als der Interviewer nach dem Unterschied zwischen char und varchar in mysql fragte
Inhaltsverzeichnis Unterschied zwischen char und ...
Zusammenfassung der Unterschiede und Verwendung von Plugins und Komponenten in Vue
Die Betriebsumgebung dieses Tutorials: Windows 7-...
Allgemeine DIV-Aufgaben (Teil 2) — Umwandlung in Editoren und verschiedene DIY-Anwendungen von DIV
Seit der Einführung des contentEditable-Attributs ...
So erstellen Sie mit Photoshop ein Web-Drahtgittermodell
Dieser Beitrag stellt eine Reihe kostenloser Phot...
Detaillierte Erläuterung des Docker-Visualisierungsgrafiktools Portainer
Inhaltsverzeichnis 1. Einführung in Portainer 2. ...
Docker erstellt die Codeerkennungsplattform SonarQube und erkennt den Prozess von Maven-Projekten
1 Einleitung Ein guter Programmierer sollte über ...
Detailliertes Tutorial zur Installation von MySQL 8 in CentOS 7
Vorbereiten Umweltinformationen zu diesem Artikel...
Benutzerdefinierte Menünavigation im WeChat-Applet zum Erzielen eines Treppeneffekts
Designabsichten Beim Entwickeln einer Seite müsse...
Detaillierte Erklärung, wie man HSTS in nginx aktiviert, um den Browser zu zwingen, auf HTTPS-Zugriff umzuleiten
Im vorherigen Artikel haben wir den lokalen Knote...
Detaillierte Erklärung zu Padding und Abkürzungen im CSS-Boxmodell
Wie oben gezeigt, sind Füllwerte zusammengesetzte...
15 Best Practices für HTML-Anfänger
Hier sind 30 Best Practices für HTML-Anfänger. 1....
JS implementiert WeChats "Shit Bombing"-Funktion
Hallo zusammen, ich bin Qiufeng. Vor Kurzem hat W...
Verwendung des Linux-Lesebefehls
1. Befehlseinführung Der Lesebefehl ist ein integ...
Grafisches Tutorial zur Installation von MySQL 5.6.35 unter Windows 10 64-Bit
1. Laden Sie MySQL Community Server 5.6.35 herunt...