في الآونة الأخيرة ، اشتكى العديد من طلاب الواجهة الأمامية من أنهم لا يستطيعون تسجيل حسابهم حتى لو قاموا بتسجيل الدخول إلى نموذج تسجيل الدخول. لا تزال هذه مشكلة شائعة للتطبيقات الواحدة وصفحات الويب التي تستخدم المزيد من AJAX.
userApp عبارة عن webapp مصممة باستخدام AngularJS ، لكنها لم تتمكن من دعم ميزة "حفظ كلمة المرور" للمتصفح.
فيما يلي بعض المشكلات الموجودة:
لا يمكن إدراج النموذج ديناميكيًا في DOM باستخدام JS.
يجب أن يصدر النموذج بالفعل طلبًا منشورًا. (لا يمكن الحصول على محتوى النموذج ثم تقديم طلب مع Ajax)
عندما يملأ المستعرض تلقائيًا في النموذج ، لا يمكن لـ $ Scope الحصول على البيانات المحدثة.
Firefox بسيط نسبيا. طالما أن عنصر النموذج يحتوي على سمة اسم ، بعد تشغيل حدث التقديم ، سيذكر المستخدم تلقائيًا ما إذا كان سيتم تسجيل البيانات.
نسخة الكود كما يلي:
<form name = "login-form" ng-submit = "login ()">
<input id = "login" name = "login" type = "text" ng-model = "user.login">
<input id = "password" name = "password" type = "password" ng-model = "user.password">
</form>
متطلبات Firefox لتسجيل البيانات بسيطة نسبيًا
لكن Firefox لديه مشكلة. بعد ملء النموذج تلقائيًا ، لن يتم تحديث البيانات في نطاق $. لذلك غوغل ووجدت بعض الاختراقات لهذه القضية. لكنني أشعر دائمًا أن هذه الحلول غير ضرورية ، لأن كل ما أحتاجه هو إحضار البيانات معي عند تقديم النموذج ، بدلاً من بعض تقنية ربط البيانات التافهة للغاية. لذلك استخدمت طريقة بسيطة للغاية: احصل على قيمة عنصر النموذج عند إرسال النموذج.
نسخة الكود كما يلي:
$ scope.login = function () {
$ scope.user = {
تسجيل الدخول: $ ("#login"). val () ،
كلمة المرور: $ ("#password"). val ()
} ؛
...
العودة كاذبة
} ؛
حسنًا ، لا توجد مشكلة مع Firefox الآن ، ولكن ماذا علي أن أفعل مع Chrome؟
سيطالب Chrome بالمستخدم فقط ما إذا كان يجب تخزين كلمة المرور عندما يبدأ النموذج بالفعل طلبًا نشرًا ، ولكن بهذه الطريقة ، لا يمكن تشغيله مع Ajax.
هذا هو الحل:
عندما يقدم النموذج طلبًا منشورًا ، اعترضه باستخدام NG-submitt ، وإرجاع خطأ لحظره ، وإرسال البيانات مع Ajax.
عندما يعود Ajax بنجاح ، قم بتخزين الجلسة في ملفات تعريف الارتباط وإعادة تقديم النموذج.
عند إعادة تحميل الصفحة ، ستجد أنه قد تم اعتمادها وإعادة توجيهها إلى الصفحة الرئيسية.
سيؤدي ذلك إلى تحديث الصفحة مرة واحدة ، ولكن يجب تحديثها فقط عند تسجيل الدخول. فقط تأكد من إرجاع الصفحة في نفس العنوان.
ولكن إذا تمت إضافة النموذج ديناميكيًا إلى DOM ، فلا تزال هذه الطريقة لا تعمل. الحل هو إضافة نموذج مخفي إلى index.html. عندما تحتاج إلى إرسال البيانات ، انسخ البيانات التي تنقلها نماذج أخرى إلى النموذج المخفي.
قمت بتعبئتها في توجيه:
نسخة الكود كما يلي:
app.directive ("ngloginsubmit" ، function () {
يعود {
تقييد: "أ" ،
نِطَاق: {
onsubmit: "= ngloginsubmit"
} ،
الرابط: الدالة (النطاق ، العنصر ، attrs) {
$ (element) [0] .onsubmit = function () {
$ ("#login-login"). val ($ ("#login" ، element) .val ()) ؛
$ ("#login-password"). val ($ ("#password" ، element) .val ()) ؛
scope.onsubmit (function () {
$ ("#login-form") [0] .Submit () ؛
}) ؛
العودة كاذبة
} ؛
}
} ؛
}) ؛
النموذج المخفي في index.html:
نسخة الكود كما يلي:
<name form = "login-form" id = "login-form" method = "post" Action = "" style = "display: none ؛">
<input name = "login" id = "login-login" type = "text">
<input name = "password" id = "login-password" type = "password">
</form>
نموذج تسجيل الدخول المؤقت
نسخة الكود كما يلي:
<form name = "login-form" autocomplete = "on" ng-login-submit = "login">
<input id = "login" name = "login" type = "text"
<input id = "password" name = "password" type = "password"
</form>
وحدة تحكم لتسجيل الدخول:
نسخة الكود كما يلي:
$ scope.login = function (إرسال) {
$ scope.user = {
تسجيل الدخول: $ ("#login"). val () ،
كلمة المرور: $ ("#password"). val ()
} ؛
وظيفة ajaxcallback () {
يُقدِّم()؛
}
العودة كاذبة
} ؛
عند الانتعاش ، سيؤدي ذلك إلى إعادة تقديم النموذج
الآن يتم حل هذه المشكلة ، ولكن كلما ضغطت F5 ، سوف يذكرك المتصفح ما إذا كنت تريد إعادة تقديم النموذج. هذا حقًا سخيف بعض الشيء ، لذلك أضفت ملفًا قبل اللوجين.
لا بأس الآن ~