Nachteile der synchronen Formüberprüfung
Bei der Beantwortung der Fehlermeldung muss die gesamte Seite neu geladen werden (obwohl ein Cache vorhanden ist, muss der Client weiter vergleichen, ob jede Datei über das HTTP -Protokoll Aktualisierungen enthält, um die Datei auf dem neuesten Stand zu halten).
Nachdem der Server falsch reagiert hat, gingen alle vom Benutzer eingegebenen Informationen verloren, und der Benutzer muss sie von Grund auf neu ausfüllen (einige Browser haben uns geholfen, diese Daten zu zwischenspeichern).
Die ursprüngliche Absicht der asynchronen Überprüfungsformular
Benutzererfahrung verbessern
Maximieren und reduzieren Sie Netzwerkanfragen und reduzieren Sie den Serverdruck
Schauen wir uns eine gemeinsame asynchrone Formüberprüfung an (prüfen Sie, ob die Arbeitsnummer im Hintergrund vorhanden ist und sie als gültige Arbeitsnummer existiert).
Überprüfen Sie die Arbeitsnummer
Die Codekopie lautet wie folgt:
var base_path = '$ {rc.contextPath}';
var $ workeridInput = $ ('#WorkeridInput');
var $ WorkerIdError = $ ('#WorkerIdError');
// Identifizieren Sie, ob die vom Benutzer eingegebene Arbeitsnummer korrekt ist
var isworkerIdCorrect = false;
VAR ERROR_WORKER_ID_IS_NULL = "Arbeitnehmerarbeitsnummer kann nicht leer sein";
VAR ERROR_WORKER_ID_IS_NOT_CORRECT = "Bitte geben Sie eine gültige Mitarbeiternummer ein";
// Fehlermeldung anzeigen
FunktionshowWorkeridError (ErrorMessage) {
$ WorkerIDError.html (ErrorMessage);
$ WorkerIDError.show ();
}
// Fehlermeldung ausblenden
$ WorkeridInput.on ('Keydown', function () {
$ WorkerIdError.hide ();
});
// Speichern Sie die Arbeitsnummer, die Sie beim letzten Mal eingegeben haben
$ WorkeridInput.on ('Focus', function () {
var WorkerID = $ .trim ($ (this) .val ());
$ (this) .data ('vor', WorkerID);
});
// Berechnen bei Unschärfe
$ workeridInput.on ('Blur', function () {
var WorkerID = $ .trim ($ (this) .val ());
// Wenn die Länge 0 ist, wird die Fehlermeldung mit der leeren Arbeitsnummer angezeigt
if (! Workerid.length) {
showWorkerIdError (ERROR_WERKER_ID_IS_NULL);
false zurückgeben;
}
// Wenn die von dem Benutzer derzeit eingegebenen Daten die gleichen sind wie die Daten, die das letzte Mal eingegeben wurden, wird die Hintergrundschnittstelle nicht aufgerufen
// Angenommen, der Benutzer betritt 123456 und ruft die Hintergrundschnittstelle auf, und das Rückgabeergebnis ist die falsche Arbeitsnummer
// Nachdem der Benutzer den Inhalt der Eingabe geändert hat, ist er weiter
if (WorkerID == $ (this) .data ('vor')) {
if (! isworkerIdCorrect) {
showWorkerIdError (ERROR_WERKER_ID_IS_NOT_CORRECT);
}
false zurückgeben;
}
// Aufrufen der Hintergrundschnittstelle, um zu überprüfen, ob diese Mitarbeiter -ID korrekt ist
Checkworkeridexisten (WorkerID, Funktion (Daten) {
isworkerIdCorrect = data.isworkeridexisten;
if (! isworkerIdCorrect) {
showWorkerIdError (ERROR_WERKER_ID_IS_NOT_CORRECT);
}
});
});
Funktion Checkworkeridexisten (WorkerID, Callback) {
$ .ajax ({{{
URL: Base_path + '/forgotpwd/checkworkeridexists.htm',,
Daten: {
Workerid: WorkerID
},
Erfolg: Rückruf
});
}
$ WorkerIdform.on ('subieren', function () {
// Unser Formular kann nur eingereicht werden, wenn der Server wahr zurückgibt
if (! isworkerIdCorrect) {
$ workeridInput.focus ();
false zurückgeben;
}
});
Nach dem Schreiben des obigen Codes erfolgt die Überprüfung eines Eingabefeldes im Grunde genommen.
Ich denke, es gibt einige Dinge, die die Benutzererfahrung beeinflussen
Der Kutschrückgabebetrieb wird noch nicht unterstützt. Oh mein Gott, Sie müssen in der Lage sein, ein Formular einzureichen, wenn Sie eintreten.
Wenn die Internetgeschwindigkeit des Benutzers langsam ist, klicken Sie auf die Schaltfläche Senden, es gibt keine Antwort, da ISWORKERIDCorrect falsch ist und nur dann der Fall ist, wenn die Serverüberprüfung erfolgreich ist.
Hier ist der geänderte Code:
Die Codekopie lautet wie folgt:
var base_path = '$ {rc.contextPath}';
var $ workeridInput = $ ('#WorkeridInput');
var $ WorkerIdError = $ ('#WorkerIdError');
// Identifizieren Sie, ob die vom Benutzer eingegebene Arbeitsnummer korrekt ist
var isworkerIdCorrect = false;
// Identifizieren Sie die Arbeitsnummer der Hintergrundüberprüfung wurden abgeschlossen (True: Is Checking, False: Die Überprüfung wurde nicht gestartet oder beendet).
var isworkerIdloading = false;
// Identifizieren Sie, ob der Benutzer das Formular übermittelt hat
var issubmit = false;
VAR ERROR_WORKER_ID_IS_NULL = "Arbeitnehmerarbeitsnummer kann nicht leer sein";
VAR ERROR_WORKER_ID_IS_NOT_CORRECT = "Bitte geben Sie eine gültige Mitarbeiternummer ein";
// Fehlermeldung anzeigen
FunktionshowWorkeridError (ErrorMessage) {
$ WorkerIDError.html (ErrorMessage);
$ WorkerIDError.show ();
}
// Fehlermeldung ausblenden
$ WorkeridInput.on ('Keydown', function () {
$ WorkerIdError.hide ();
});
// Speichern Sie die Arbeitsnummer, die Sie beim letzten Mal eingegeben haben
$ WorkeridInput.on ('Focus', function () {
var WorkerID = $ .trim ($ (this) .val ());
$ (this) .data ('vor', WorkerID);
});
// Berechnen bei Unschärfe
$ workeridInput.on ('Blur', function () {
var WorkerID = $ .trim ($ (this) .val ());
// Wenn die Länge 0 ist, wird die Fehlermeldung mit der leeren Arbeitsnummer angezeigt
if (! Workerid.length) {
showWorkerIdError (ERROR_WERKER_ID_IS_NULL);
false zurückgeben;
}
// Wenn die von dem Benutzer derzeit eingegebenen Daten die gleichen sind wie die Daten, die das letzte Mal eingegeben wurden, wird die Hintergrundschnittstelle nicht aufgerufen
// Angenommen, der Benutzer betritt 123456 und ruft die Hintergrundschnittstelle auf, und das Rückgabeergebnis ist die falsche Arbeitsnummer
// Nachdem der Benutzer den Inhalt der Eingabe geändert hat, ist er weiter
if (WorkerID == $ (this) .data ('vor')) {
if (! isworkerIdCorrect) {
showWorkerIdError (ERROR_WERKER_ID_IS_NOT_CORRECT);
}
false zurückgeben;
}
// Aufrufen der Hintergrundschnittstelle, um zu überprüfen, ob diese Mitarbeiter -ID vorliegt
Checkworkeridexisten (WorkerID, Funktion (Daten) {
isworkerIdCorrect = data.isworkeridexisten;
if (! isworkerIdCorrect) {
showWorkerIdError (ERROR_WERKER_ID_IS_NOT_CORRECT);
}
});
});
Funktion Checkworkeridexisten (WorkerID, Callback) {
$ .ajax ({{{
URL: Base_path + '/forgotpwd/checkworkeridexists.htm',,
Daten: {
Workerid: WorkerID
},
Beforesend: function () {
// Vor dem Senden der Anfrage wird die Arbeitsnummer überprüft.
isworkerIdloading = true;
},
Erfolg: Rückruf,
vollständige: function () {
// Nach dem Ende schließen Sie das Logo
isworkerIdLoading = false;
// Im Hintergrundüberprüfungsprozess wird er es hier automatisch einreichen, wenn der Benutzer ein Formular einreicht.
if (issubmit) {
$ WorkerIDForm.Submit ();
}
}
});
}
// Geben Sie das Formular ein. Senden Sie das Formular
$ workeridInput.on ('tastePress', Funktion (e) {
if (e.Which === 13) {
$ (this) .blur ();
$ WorkerIDForm.Submit ();
}
});
$ WorkerIdform.on ('subieren', function () {
// Wenn die Arbeitsnummer im Hintergrund überprüft wird, wird festgestellt, dass der Benutzer das Formular übermittelt hat
if (isworkerIdoading) {
issubmit = true;
false zurückgeben;
}
if (! isworkerIdCorrect) {
$ workeridInput.focus ();
false zurückgeben;
}
});
Im endgültigen Effekt sind die beiden Eingangsboxen in der Abbildung eine asynchrone Überprüfung, der Effekt sieht jedoch genauso aus wie synchron.
Das GPRRS -Netzwerk wird in der Abbildung verwendet, um eine langsame Netzwerkgeschwindigkeit zu simulieren
Reproduktionsdiagramm