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
MySQL-Rekursionsproblem
MySQL selbst unterstützt keine rekursive Syntax, ...
vue.config.js Verpackungsoptimierungskonfiguration
Die Informationen auf Baidu sind so vielfältig, d...
So starten Sie ein JAR-Paket und führen es unter Linux im Hintergrund aus
Der Linux-Befehl zum Ausführen des JAR-Pakets lau...
Ubuntu-Installation Matlab2020b, ausführliches Tutorial und Ressourcen
Inhaltsverzeichnis 1. Ressourcendateien 2. Instal...
5 MySQL-GUI-Tools, die Ihnen bei der Datenbankverwaltung empfohlen werden
Es gibt viele Datenbankverwaltungstools für MySQL...
Detaillierte Erläuterung von vier Lösungen für schwebende Probleme im CSS-Layout
1. Ursache: Der Effekt, nachdem die Subbox auf Fl...
Grafisches Tutorial zur Installation und Konfiguration von mysql 8.0.16 winx64.zip
In diesem Artikel wird der spezifische Code der I...
Detaillierte Erklärung der React-Komponentenkommunikation
Inhaltsverzeichnis Einführung in die Komponentenk...
Lösung für zu große Mysql-Binlog-Protokolldateien
Inhaltsverzeichnis 1. Verwandte Binlog-Konfigurat...
Beheben Sie das Problem, dass Navicat keine Verbindung zum MySQL-Server im Centos-System in VMware herstellen kann
Lösung für Host „xxxx“ darf keine Verbindung zu d...
Detaillierte Einführung in die Chrome-Entwicklertools - Zeitleiste
1. Übersicht Benutzer erwarten, dass die Webanwen...
Detaillierte Erklärung des strikten Modus in JavaScript
Inhaltsverzeichnis Einführung Verwenden des strik...
Detaillierte Erklärung der HTML-Tabellen
Funktion: Datenanzeige, Tabellenanwendungsszenari...
Detaillierte Erklärung zur Verwendung von Tomcat Native zur Verbesserung der Tomcat IO-Effizienz
Inhaltsverzeichnis Einführung So stellen Sie eine...
CSS-Pixel und Lösungen für verschiedene Probleme bei der Anpassung mobiler Bildschirme
Pixel Auflösung Mit der Monitorauflösung ist eige...