ข้อเสียของการตรวจสอบรูปแบบแบบซิงโครนัส
เมื่อตอบกลับข้อความแสดงข้อผิดพลาดทั้งหน้าจะต้องโหลดซ้ำ (แม้ว่าจะมีแคชลูกค้ายังคงต้องเปรียบเทียบว่าแต่ละไฟล์มีการอัปเดตผ่านโปรโตคอล HTTP เพื่อให้ไฟล์ทันสมัยอยู่เสมอหรือไม่)
หลังจากเซิร์ฟเวอร์ตอบสนองไม่ถูกต้องข้อมูลทั้งหมดที่ป้อนโดยผู้ใช้ก็หายไปและผู้ใช้จำเป็นต้องกรอกข้อมูลตั้งแต่เริ่มต้น (เบราว์เซอร์บางตัวช่วยเราแคชข้อมูลนี้)
ความตั้งใจดั้งเดิมของแบบฟอร์มการตรวจสอบแบบอะซิงโครนัส
ปรับปรุงประสบการณ์ผู้ใช้
เพิ่มและลดคำขอเครือข่ายและลดความดันเซิร์ฟเวอร์
ลองมาดูการตรวจสอบแบบฟอร์มแบบอะซิงโครนัสทั่วไป (ตรวจสอบว่าหมายเลขงานมีอยู่ในพื้นหลังหรือไม่และมีหมายเลขทำงานที่ถูกต้อง)
ตรวจสอบหมายเลขงาน
การคัดลอกรหัสมีดังนี้:
var base_path = '$ {rc.contextpath}';
var $ workerIdInput = $ ('#workerIdInput');
var $ workerIderRor = $ ('#workerIdError');
// ระบุว่าหมายเลขงานที่ป้อนโดยผู้ใช้นั้นถูกต้อง
var iSworkerIdCorrect = false;
var error_worker_id_is_null = "หมายเลขการทำงานของพนักงานไม่สามารถว่างเปล่า";
var error_worker_id_is_not_correct = "โปรดป้อนหมายเลขพนักงานที่ถูกต้อง";
// แสดงข้อความแสดงข้อผิดพลาด
ฟังก์ชั่น ShowworkerIdError (errorMessage) {
$ workeriderror.html (errormessage);
$ workeriderror.show ();
-
// ซ่อนข้อความแสดงข้อผิดพลาด
$ workerIdInput.on ('keydown', function () {
$ workeriderror.hide ();
-
// บันทึกหมายเลขงานที่คุณป้อนครั้งสุดท้าย
$ workerIdInput.on ('โฟกัส', function () {
var workerId = $ .trim ($ (นี่) .val ());
$ (นี่) .data ('ก่อน', workerid);
-
// การคำนวณเมื่อเบลอ
$ workerIdInput.on ('เบลอ', ฟังก์ชัน () {
var workerId = $ .trim ($ (นี่) .val ());
// เมื่อความยาวเป็น 0 ข้อความแสดงข้อผิดพลาดที่มีหมายเลขงานว่างจะปรากฏขึ้น
if (! workerId.length) {
ShowworkerIderror (error_worker_id_is_null);
กลับเท็จ;
-
// หากข้อมูลที่ป้อนโดยผู้ใช้ในปัจจุบันนั้นเหมือนกับข้อมูลที่ป้อนครั้งล่าสุดอินเทอร์เฟซพื้นหลังจะไม่ถูกเรียก
// สมมติว่าผู้ใช้ป้อน 123456 และเรียกอินเทอร์เฟซพื้นหลังและผลการส่งคืนคือหมายเลขงานที่ไม่ถูกต้อง
// หลังจากผู้ใช้เปลี่ยนเนื้อหาอินพุตแล้วยังคงเป็น 123456 โปรแกรมการตรวจสอบจะไม่เข้าถึงเครือข่ายและแสดงข้อความแสดงข้อผิดพลาดโดยตรง
if (workerId == $ (this) .data ('ก่อน')) {
if (! isworkerIdCorrect) {
ShowworkerIderror (error_worker_id_is_not_correct);
-
กลับเท็จ;
-
// การเรียกอินเทอร์เฟซพื้นหลังเพื่อตรวจสอบว่ารหัสพนักงานนี้ถูกต้องหรือไม่
checkworkeridexists (workerid, function (data) {
ISWorkerIdCorrect = data.isworkeridexists;
if (! isworkerIdCorrect) {
ShowworkerIderror (error_worker_id_is_not_correct);
-
-
-
ฟังก์ชั่น checkworkeridexists (workerid, callback) {
$ .ajax ({
URL: base_path + '/forgotpwd/checkworkeridexists.htm'
ข้อมูล: {
WorkerId: Workerid
-
ความสำเร็จ: การโทรกลับ
-
-
$ workerIdform.on ('ส่ง', function () {
// แบบฟอร์มของเราสามารถส่งได้เฉพาะเมื่อเซิร์ฟเวอร์ส่งคืนจริง
if (! isworkerIdCorrect) {
$ WorkerIdInput.focus ();
กลับเท็จ;
-
-
หลังจากเขียนรหัสข้างต้นการตรวจสอบกล่องอินพุตจะเสร็จสิ้นโดยทั่วไป
ฉันคิดว่ามีบางสิ่งที่ส่งผลกระทบต่อประสบการณ์ผู้ใช้
ยังไม่รองรับการดำเนินการส่งคืนรถ โอ้พระเจ้าคุณจะต้องสามารถส่งแบบฟอร์มได้หากคุณป้อน
หากความเร็วอินเทอร์เน็ตของผู้ใช้ช้าคลิกปุ่มส่งจะไม่มีการตอบสนองเนื่องจาก ISWorkerIdCorrect เป็นเท็จและจะเป็นจริงเฉพาะในกรณีที่การตรวจสอบเซิร์ฟเวอร์สำเร็จ
นี่คือรหัสที่แก้ไขแล้ว:
การคัดลอกรหัสมีดังนี้:
var base_path = '$ {rc.contextpath}';
var $ workerIdInput = $ ('#workerIdInput');
var $ workerIderRor = $ ('#workerIdError');
// ระบุว่าหมายเลขงานที่ป้อนโดยผู้ใช้นั้นถูกต้อง
var iSworkerIdCorrect = false;
// ระบุหมายเลขงานตรวจสอบพื้นหลังเสร็จสมบูรณ์ (จริง: กำลังตรวจสอบ, เท็จ: การตรวจสอบไม่ได้เริ่มต้นหรือสิ้นสุด)
var iSworkerIdloading = false;
// ระบุว่าผู้ใช้ส่งแบบฟอร์มหรือไม่
var issubmit = false;
var error_worker_id_is_null = "หมายเลขการทำงานของพนักงานไม่สามารถว่างเปล่า";
var error_worker_id_is_not_correct = "โปรดป้อนหมายเลขพนักงานที่ถูกต้อง";
// แสดงข้อความแสดงข้อผิดพลาด
ฟังก์ชั่น ShowworkerIdError (errorMessage) {
$ workeriderror.html (errormessage);
$ workeriderror.show ();
-
// ซ่อนข้อความแสดงข้อผิดพลาด
$ workerIdInput.on ('keydown', function () {
$ workeriderror.hide ();
-
// บันทึกหมายเลขงานที่คุณป้อนครั้งสุดท้าย
$ workerIdInput.on ('โฟกัส', function () {
var workerId = $ .trim ($ (นี่) .val ());
$ (นี่) .data ('ก่อน', workerid);
-
// การคำนวณเมื่อเบลอ
$ workerIdInput.on ('เบลอ', ฟังก์ชัน () {
var workerId = $ .trim ($ (นี่) .val ());
// เมื่อความยาวเป็น 0 ข้อความแสดงข้อผิดพลาดที่มีหมายเลขงานว่างจะปรากฏขึ้น
if (! workerId.length) {
ShowworkerIderror (error_worker_id_is_null);
กลับเท็จ;
-
// หากข้อมูลที่ป้อนโดยผู้ใช้ในปัจจุบันนั้นเหมือนกับข้อมูลที่ป้อนครั้งล่าสุดอินเทอร์เฟซพื้นหลังจะไม่ถูกเรียก
// สมมติว่าผู้ใช้ป้อน 123456 และเรียกอินเทอร์เฟซพื้นหลังและผลการส่งคืนคือหมายเลขงานที่ไม่ถูกต้อง
// หลังจากผู้ใช้เปลี่ยนเนื้อหาอินพุตแล้วยังคงเป็น 123456 โปรแกรมการตรวจสอบจะไม่เข้าถึงเครือข่ายและแสดงข้อความแสดงข้อผิดพลาดโดยตรง
if (workerId == $ (this) .data ('ก่อน')) {
if (! isworkerIdCorrect) {
ShowworkerIderror (error_worker_id_is_not_correct);
-
กลับเท็จ;
-
// การเรียกอินเทอร์เฟซพื้นหลังเพื่อตรวจสอบว่ามีรหัสพนักงานนี้อยู่หรือไม่
checkworkeridexists (workerid, function (data) {
ISWorkerIdCorrect = data.isworkeridexists;
if (! isworkerIdCorrect) {
ShowworkerIderror (error_worker_id_is_not_correct);
-
-
-
ฟังก์ชั่น checkworkeridexists (workerid, callback) {
$ .ajax ({
URL: base_path + '/forgotpwd/checkworkeridexists.htm'
ข้อมูล: {
WorkerId: Workerid
-
beforesend: function () {
// ก่อนส่งคำขอหมายเลขงานจะถูกตรวจสอบ
ISWorkerIdloading = true;
-
ความสำเร็จ: โทรกลับ
เสร็จสมบูรณ์: ฟังก์ชั่น () {
// หลังจากสิ้นสุดให้ปิดโลโก้
ISWorkerIdloading = FALSE;
// ในกระบวนการตรวจสอบพื้นหลังหากผู้ใช้ส่งแบบฟอร์มเขาจะส่งมันโดยอัตโนมัติที่นี่
if (issubmit) {
$ workerIdform.submit ();
-
-
-
-
// ป้อนการส่งแบบฟอร์ม
$ workerIdInput.on ('keypress', ฟังก์ชั่น (e) {
ถ้า (e.which === 13) {
$ (นี่) .blur ();
$ workerIdform.submit ();
-
-
$ workerIdform.on ('ส่ง', function () {
// หากมีการตรวจสอบหมายเลขงานในพื้นหลังจะมีการระบุว่าผู้ใช้ได้ส่งแบบฟอร์ม
if (iSworkerIdloading) {
issubmit = true;
กลับเท็จ;
-
if (! isworkerIdCorrect) {
$ WorkerIdInput.focus ();
กลับเท็จ;
-
-
ในเอฟเฟกต์สุดท้ายกล่องอินพุตทั้งสองในรูปนั้นเป็นการตรวจสอบแบบอะซิงโครนัส แต่เอฟเฟกต์ดูเหมือนจะเป็นแบบซิงโครนัส
เครือข่าย GPRRS ใช้ในรูปเพื่อจำลองความเร็วเครือข่ายที่ช้า
แผนผังการสืบพันธุ์