ajax form

شكل اياكس

نماذج HTML على أدوية تحسين الأداء.

ملحوظة: نموذج Ajax غير مرتبط بالبوليمر. في الواقع، ليس لديها أي تبعيات على الإطلاق، ولكن يجب أن تعمل بشكل جيد مع Polymer أو أي مكتبة عناصر مخصصة أخرى. إذا كنت تفضل استخدام عناصر مخصصة بسيطة، فإن نموذج ajax هو أيضًا خيارك الأفضل.

ما الخطأ في <form> التقليدي؟

1. يؤدي إرسال النموذج إلى تغيير/إعادة تحميل الصفحة، وليس من السهل منع ذلك بشكل صحيح.

2. لا يمكنك إرسال رؤوس مخصصة مع النموذج المقدم.

3. لا يمكنك (بسهولة) تحليل استجابة الخادم بعد إرسال النموذج.

4. يعد تتبع النماذج/الحقول غير الصالحة برمجيًا أمرًا محبطًا.

5. لا يمكنك إرسال بيانات النموذج بتنسيق JSON.

6. ليس لديك فرصة لزيادة البيانات التي يدخلها المستخدم برمجيًا قبل إرسالها إلى الخادم.

7. لا يمكن إرسال عناصر النموذج المخصصة (مثل تلك التي تم إنشاؤها باستخدام مواصفات مكونات الويب) باستخدام <form> .

يعمل العنصر المخصص ajax-form على تعزيز <form> التقليدي لتوفير ميزات إضافية وحل المشكلات المذكورة أعلاه. راجع صفحة وثائق API للحصول على الوثائق والعروض التوضيحية الكاملة.

تثبيت

npm install ajax-form

يستخدم

استخدم نموذج ajax تمامًا كما تستخدم نموذجًا تقليديًا، باستثناء السمة المطلوبة is="ajax-form" التي يجب عليك تضمينها في ترميز عنصر <form> الخاص بك. نظرًا لأن ajax-form هو أحد مكونات الويب، فقد تحتاج إلى تضمين polyfill لمكون الويب، مثل webcomponents.js للتأكد من أن المتصفحات التي لا تطبق مواصفات WC قادرة على الاستفادة من نموذج ajax. لا يحتوي نموذج Ajax على تبعيات ثابتة.

يبدو الاستخدام البسيط ajax-form تمامًا مثل <form> العادي، مع إضافة سمة is :

 <form is="ajax-form" action="my/form/handler"method="post"><label>أدخل اسمك: <input type="text" name="full_name"></label>.. .</النموذج>

راجع صفحة وثائق API للحصول على الوثائق والعروض التوضيحية الكاملة.

اندماج

هل تقوم بتطوير مكون ويب لحقل النموذج؟ اقرأ التعليمات أدناه للتأكد من تكامل الحقل الخاص بك بشكل صحيح مع نموذج ajax.

تقديم

سوف يتكامل المكون الخاص بك بشكل جيد في نموذج ajax بشرط أن يكشف العنصر المخصص الخاص بك عن خاصية value تحتوي على القيمة الحالية للحقل. إذا لم يكن هذا صحيحًا، فيجب أن يضمن حقلك المخصص أن حقل نموذج HTML الأصلي هو جزء من DOM الخفيف. في كلتا الحالتين، يجب أن يحتوي العنصر ذو خاصية value أيضًا على سمة name . سيحتاج المستخدم/المتكامل الخاص بك إلى تضمين قيمة مناسبة لهذا الحقل.

تصديق

إذا كشف حقلك المخصص عن حقل نموذج HTML أصلي في Light DOM، فلن يكون هناك ما يمكنك فعله - سيحترم ajax-form أي تحقق يضيفه المستخدم/المتكامل إلى الحقل. يجب وضع سمة (سمات) القيد في حقل نموذج HTML الأصلي.

إذا كان حقلك المخصص لا يعرض حقل نموذج HTML أصلي في Light DOM افتراضيًا، وتريد أن يحترم نموذج ajax قيود التحقق من الصحة، فستحتاج إلى تضمين رمز صغير لمراعاة ذلك. فيما يلي الخطوات التي يجب اتباعها:

1. قم بإضافة حقل <input type="text"> غير شفاف، 0x0 إلى Light DOM، قبل الحقل مباشرة.

2. قم بإضافة خاصية customElementRef إلى الإدخال، بقيمة تساوي الحقل الخاص بك.

3. تأكد من أن صحة الإدخال تتطابق دائمًا مع صلاحية المجال الخاص بك. يمكنك القيام بذلك عبر التابع setCustomValidity الموجود في HTMLInputElement .

راجع طريقة setValidationTarget في الكود المصدري للعنصر المخصص <file-input> للحصول على مثال.

اختبار

npm install
npm install -g grunt-cli
grunt

• سيتم اختبار تشغيل grunt بدون أي معلمات مقابل عدد قليل من المتصفحات المثبتة محليًا (راجع قاعدة التعليمات البرمجية للحصول على التفاصيل).

• تشغيل grunt shell:wctSauce سيجري اختبارات على عدد من المتصفحات في SauceLabs. تأكد من أن اسم المستخدم والمفتاح الخاصين بـ SauceLabs متصلان بمتغيرات البيئة المناسبة أولاً.