เมื่อเร็ว ๆ นี้นักเรียนส่วนหน้าหลายคนบ่นว่าพวกเขาไม่สามารถบันทึกบัญชีของพวกเขาได้แม้ว่าพวกเขาจะเข้าสู่รูปแบบการเข้าสู่ระบบ นี่ยังคงเป็นปัญหาที่พบบ่อยสำหรับแอปพลิเคชันหน้าเดียวและหน้าเว็บที่ใช้ AJAX มากขึ้น
UserApp เป็น WebApp ที่สร้างขึ้นโดยใช้ AngularJS แต่ไม่สามารถรองรับคุณสมบัติ "บันทึกรหัสผ่าน" ของเบราว์เซอร์ได้
นี่คือปัญหาบางอย่างที่พบ:
แบบฟอร์มไม่สามารถแทรกแบบไดนามิกลงใน DOM โดยใช้ JS
แบบฟอร์มจะต้องออกคำขอโพสต์จริง ๆ (ไม่สามารถรับเนื้อหาแบบฟอร์มได้จากนั้นทำการร้องขอด้วย AJAX)
เมื่อเบราว์เซอร์กรอกแบบฟอร์มโดยอัตโนมัติขอบเขต $ ไม่สามารถรับข้อมูลที่อัปเดตได้
Firefox ค่อนข้างง่าย ตราบใดที่องค์ประกอบฟอร์มมีแอตทริบิวต์ชื่อหลังจากทริกเกอร์เหตุการณ์การส่งมันจะเตือนผู้ใช้โดยอัตโนมัติว่าจะบันทึกข้อมูลหรือไม่
การคัดลอกรหัสมีดังนี้:
<form name = "login-form" ng-submit = "login ()">
<อินพุต id = "ล็อกอิน" name = "เข้าสู่ระบบ" type = "text" ng-model = "user.login">
<อินพุต id = "รหัสผ่าน" ชื่อ = "รหัสผ่าน" type = "รหัสผ่าน" ng-model = "user.password">
</form>
ข้อกำหนดสำหรับ Firefox ในการบันทึกข้อมูลนั้นค่อนข้างง่าย
แต่ Firefox มีปัญหา หลังจากกรอกแบบฟอร์มโดยอัตโนมัติข้อมูลในขอบเขต $ จะไม่ได้รับการอัปเดต ดังนั้นฉันจึง googled และพบแฮ็กบางอย่างสำหรับปัญหานี้ แต่ฉันมักจะรู้สึกว่าการแก้ปัญหาเหล่านี้ไม่จำเป็นเพราะสิ่งที่ฉันต้องการคือนำข้อมูลมาด้วยเมื่อส่งแบบฟอร์มแทนที่จะเป็นเทคโนโลยีที่มีผลผูกพันสองทาง ดังนั้นฉันจึงใช้วิธีที่ง่ายมาก: รับค่าขององค์ประกอบฟอร์มเมื่อส่งแบบฟอร์ม
การคัดลอกรหัสมีดังนี้:
$ scope.login = function () {
$ scope.user = {
เข้าสู่ระบบ: $ ("#login"). val ()
รหัสผ่าน: $ ("#รหัสผ่าน"). val ()
-
-
กลับเท็จ;
-
ตกลงตอนนี้ไม่มีปัญหากับ Firefox แต่ฉันควรทำอย่างไรกับ Chrome?
Chrome จะแจ้งให้ผู้ใช้เก็บรหัสผ่านหรือไม่เมื่อแบบฟอร์มแบบฟอร์มเริ่มต้นคำขอโพสต์ แต่ด้วยวิธีนี้มันไม่สามารถใช้งานได้กับ AJAX
นี่คือวิธีแก้ปัญหา:
เมื่อแบบฟอร์มทำคำขอโพสต์ให้สกัดกั้นด้วย NG-Submit ให้ส่งคืน FALSE เพื่อบล็อกและส่งข้อมูลด้วย AJAX
เมื่อ Ajax กลับมาอย่างประสบความสำเร็จให้จัดเก็บเซสชันในคุกกี้และส่งฟอร์มอีกครั้ง
เมื่อหน้าถูกโหลดซ้ำคุณจะพบว่าได้รับการรับรองและเปลี่ยนเส้นทางไปยังหน้าแรก
สิ่งนี้จะรีเฟรชหน้าหนึ่งครั้ง แต่จะต้องรีเฟรชเมื่อเข้าสู่ระบบเพียงตรวจสอบให้แน่ใจว่าหน้าจะส่งคืนที่อยู่เดียวกัน
แต่ถ้าแบบฟอร์มถูกเพิ่มลงใน DOM แบบไดนามิกวิธีนี้ยังไม่ทำงาน วิธีแก้ปัญหาคือการเพิ่มแบบฟอร์มที่ซ่อนอยู่ใน index.html เมื่อคุณต้องการส่งข้อมูลให้คัดลอกข้อมูลที่ดำเนินการโดยแบบฟอร์มอื่นไปยังแบบฟอร์มที่ซ่อนอยู่
ฉันบรรจุไว้ในคำสั่ง:
การคัดลอกรหัสมีดังนี้:
app.directive ("ngloginsubmit", function () {
กลับ {
จำกัด : "A",
ขอบเขต: {
onsubmit: "= ngloginsubmit"
-
ลิงค์: ฟังก์ชั่น (ขอบเขต, องค์ประกอบ, attrs) {
$ (องค์ประกอบ) [0] .onsubmit = function () {
$ ("#login-login"). val ($ ("#login", องค์ประกอบ) .val ());
$ ("#login-password"). val ($ ("#รหัสผ่าน", องค์ประกอบ) .val ());
scope.onsubmit (function () {
$ ("#login-form") [0] .submit ();
-
กลับเท็จ;
-
-
-
-
แบบฟอร์มที่ซ่อนอยู่ใน index.html:
การคัดลอกรหัสมีดังนี้:
<form name = "login-form" id = "login-form" method = "post" action = "" style = "display: none;">
<input name = "Login" id = "Login-Login" type = "text">
<input name = "รหัสผ่าน" id = "เข้าสู่ระบบ password" type = "รหัสผ่าน">
</form>
แบบฟอร์มการเข้าสู่ระบบชั่วคราว
การคัดลอกรหัสมีดังนี้:
<form name = "Login-Form" Autocomplete = "บน" ng-login-submit = "เข้าสู่ระบบ">
<อินพุต id = "ล็อกอิน" name = "เข้าสู่ระบบ" type = "text" autocomplete = "on">
<อินพุต id = "รหัสผ่าน" ชื่อ = "รหัสผ่าน" type = "รหัสผ่าน" Autocomplete = "on">
</form>
คอนโทรลเลอร์สำหรับการเข้าสู่ระบบ:
การคัดลอกรหัสมีดังนี้:
$ scope.login = function (ส่ง) {
$ scope.user = {
เข้าสู่ระบบ: $ ("#login"). val ()
รหัสผ่าน: $ ("#รหัสผ่าน"). val ()
-
ฟังก์ชั่น ajaxcallback () {
ส่ง();
-
กลับเท็จ;
-
เมื่อสดชื่นมันจะแจ้งว่าจะส่งฟอร์มใหม่
ตอนนี้ปัญหานี้ได้รับการแก้ไข แต่เมื่อใดก็ตามที่คุณกด F5 เบราว์เซอร์จะเตือนคุณว่าจะส่งแบบฟอร์มใหม่หรือไม่ นี่เป็นเรื่องที่ค่อนข้างน่าเบื่อจริง ๆ ดังนั้นฉันจึงเพิ่มไฟล์ pre-login.html และแบบฟอร์มที่ซ่อนอยู่จะส่งข้อมูลไปยังมันแล้วเปลี่ยนเส้นทางไปยัง index.html
ไม่เป็นไรตอนนี้ ~