الإعلانات
ربما قرأت لنا دليل مسج دليل أساسي إلى JQuery لمبرمجي جافا سكريبتإذا كنت مبرمجًا لـ Javascript ، فإن هذا الدليل إلى JQuery سيساعدك على بدء الترميز مثل النينجا. اقرأ أكثر ، وكذلك الجزء الخامس من موقعنا jQuery البرنامج التعليمي على AJAX مسج دروس (الجزء 5): أجاكس لهم جميعا!نظرًا لأننا نقترب من نهاية سلسلة دروسنا المصغرة jQuery ، فقد حان الوقت لنلقي نظرة أكثر تعمقًا على إحدى أكثر ميزات jQuery استخدامًا. يسمح AJAX لموقع إلكتروني بالتواصل مع ... اقرأ أكثر ، ولكن اليوم سأوضح لك كيفية استخدام AJAX لإرسال نموذج ويب ديناميكيًا. JQuery هي أسهل طريقة لاستخدام AJAX ، لذا قم بزيارة موقعنا بدء البرنامج التعليمي jQuery Tutorial - الشروع في العمل: الأساسيات والمحدداتفي الأسبوع الماضي ، تحدثت عن مدى أهمية jQuery لأي مطور ويب حديث ولماذا هو رائع. هذا الأسبوع ، أعتقد أن الوقت قد حان لأن تكون أيدينا متسخة ببعض التعليمات البرمجية وتعلمنا كيف ... اقرأ أكثر إذا كنت مبتدئًا. دعونا نقفز مباشرة.
لماذا استخدام AJAX
قد تتساءل "لماذا أحتاج إلى أجاكس؟" إن HTML قادر تمامًا على إرسال النماذج ، ويقوم بذلك بطريقة غير مؤلمة إلى حد ما. يتم تنفيذ AJAX في الغالبية العظمى من صفحات الويب ، وتستمر شعبيته في الارتفاع.
إن الفائدة الكبيرة التي يجلبها AJAX هي القدرة على ذلك تحميل جزئي أجزاء من صفحات الويب. وهذا يجعل الصفحات تظهر بشكل أسرع وأكثر استجابة ، ويحفظ النطاق الترددي من خلال الاضطرار فقط إلى إعادة تحميل جزء صغير من البيانات بدلاً من الصفحة بأكملها. فيما يلي بعض حالات استخدام AJAX الأساسية:
- تحقق من رسائل البريد الإلكتروني الجديدة بانتظام.
- قم بتحديث النتيجة المباشرة لكرة القدم كل 30 ثانية.
- تحديث سعر المزاد عبر الإنترنت.
يوفر لك AJAX ، المطور ، قدرة غير محدودة تقريبًا على جعل صفحات الويب سريعة وسريعة الاستجابة وسريعة - وهو أمر سيشكرك زوارك عليه.
HTML
قبل البدء ، تحتاج إلى نموذج HTML. إذا كنت لا تعرف ما هو HTML ، فقم بقراءة دليلنا على كيفية إنشاء موقع ويب للمبتدئين كيفية إنشاء موقع على شبكة الإنترنت: للمبتدئينسأرشدك اليوم خلال عملية إنشاء موقع ويب كامل من الصفر. لا تقلق إذا كان هذا يبدو صعبًا. سأرشدك خلال كل خطوة على الطريق. اقرأ أكثر .
إليك HTML الذي تحتاجه:
يحدد هذا html نموذجًا يحتوي على بعض العناصر. لاحظ كيف يوجد عمل و طريقة الصفات. هذه تحدد أين وكيف يتم تقديم النموذج. ليست هناك حاجة إليها عند استخدام AJAX ، ولكن من الجيد استخدامها ، لأنها تضمن أن زوار موقعك على الويب لا يزال بإمكانهم استخدامها إذا تم تعطيل جافا سكريبت. تتضمن هذه الصفحة jQuery التي تستضيفها Google على موقعها CDN ما هي شبكات CDN ولماذا لم يعد التخزين يمثل مشكلةتجعل شبكات CDN الإنترنت سريعة ومواقع الويب ميسورة التكلفة حتى عندما تقوم بالتوسع لملايين المستخدمين. أولا ، عرض النطاق الترددي يكلف المال ؛ أولئك منا بعقود محدودة يعرفون ذلك جيدًا. ليس فقط أنت ... اقرأ أكثر . ال رئيس يحتوي على النصي علامة - هذا هو المكان الذي ستكتب فيه التعليمات البرمجية.
قد يبدو هذا النموذج مملًا بعض الشيء في الوقت الحالي ، لذلك قد ترغب في التفكير فيه تعلم CSS 5 خطوات طفل لتعلم CSS و لتصبح ساحر CSSCSS هي أهم صفحات التغيير التي شهدتها صفحات الويب في العقد الماضي ، ومهدت الطريق لفصل النمط والمحتوى. بالطريقة الحديثة ، يحدد XHTML البنية الدلالية ... اقرأ أكثر لنعشها قليلاً.
جافا سكريبت
هناك عدة طرق لإرسال النماذج باستخدام JavaScript. الطريقة الأولى والأسهل للقيام بذلك هي من خلال إرسال طريقة:
document.getElementById ('myForm'). Submit ()؛يمكنك بالطبع استهداف النموذج باستخدام jQuery إذا كنت تفضل ذلك - فلا فرق:
$ ('# myForm'). Submit ()؛يخبر هذا الأمر متصفحك بإرسال النموذج ، تمامًا مثل الضغط على زر الإرسال. إنه يستهدف النموذج بمعرفه ، وفي هذه الحالة ، هذا هو myForm. هذه ليست AJAX ، لذلك ستعيد تحميل الصفحة بأكملها - وهو أمر غير مرغوب فيه دائمًا.
في ال طريقة سمة النموذج الخاص بك ، قمت بتحديد كيفية إرسال النموذج. هذا يمكن أن يكون بريد أو احصل على. لا يتم استخدام هذه السمة عند إرسال النماذج باستخدام AJAX ، ولكن يمكن استخدام نفس الطريقة.
يتم تشغيل الكثير من الويب الحديث من طلبات GET أو POST. بشكل عام ، يتم استخدام GET لاسترداد البيانات ، بينما يتم استخدام POST لإرسال البيانات (وإعادة الرد). يمكن إرسال البيانات باستخدام GET ، ولكن POST هو دائمًا الخيار الأفضل - خاصةً لبيانات النموذج. ربما رأيت طلبات GET من قبل - يرسلون البيانات المرفقة بعنوان URL:
somewebsite.com/index.html؟ الاسم = جوتخبر علامة الاستفهام المتصفح أن أي بيانات تليه مباشرة لن يتم استخدامها لاجتياز موقع الويب ، ولكن يجب بدلاً من ذلك تمريرها إلى الصفحة حتى تتم معالجتها. يعمل هذا بشكل جيد مع الأشياء البسيطة مثل رقم الصفحة ، ولكن له بعض العوائق:
الحد الأقصى لعدد الأحرف: هناك حد أقصى لعدد الأحرف التي يمكن إرسالها في عنوان url. قد لا يكون لديك ما يكفي إذا كنت تحاول إرسال كمية كبيرة من البيانات.
الرؤية: يمكن لأي شخص رؤية البيانات التي يتم إرسالها في طلب GET - ليس جيدًا للبيانات الحساسة مثل كلمات المرور أو بيانات النموذج.
تعمل طلبات POST بطريقة مماثلة ، إلا أنها لا ترسل البيانات في عنوان URL. وهذا يعني أنه يمكن إرسال كمية أكبر من البيانات (تُعرف البيانات باسم حمولة) ، ويتم اكتساب بعض الأمان من خلال عدم الكشف عن البيانات. لا يزال من الممكن الوصول إلى البيانات بسهولة ، لذا ابحث في شهادة SSL ما هي شهادة SSL ، وهل تحتاجها؟قد يكون تصفح الإنترنت أمرًا مخيفًا عند تضمين معلومات شخصية. اقرأ أكثر إذا كنت تريد راحة البال التامة.
يتم إرسال البيانات سواءً POST أو GET مفتاح -> القيمة أزواج. المفتاح في عنوان URL أعلاه اسم، والقيمة جو.
أفضل طريقة لإرسال النماذج هي الاستخدام جافا سكريبت و XML غير متزامنين (أجاكس). جافا سكريبت تدعم مكالمات AJAX ، ولكن يمكن أن تكون مربكة للاستخدام. ينفذ JQuery هذه الأساليب بالضبط ، ولكنه يفعل ذلك بطريقة سهلة الاستخدام. يمكنك توجيه المتصفح الخاص بك لإجراء طلب GET أو POST - التزم بـ POST لهذا المثال ، ولكن يتم تنفيذ طلبات GET بطريقة مماثلة.
إليك الصيغة:
$ .post ('some / url'، $ ('# myForm'). serialize ())؛يقوم هذا الرمز بعدة أشياء. الجزء الاول ($) يتيح لمتصفحك معرفة أنك تريد استخدام jQuery في هذه المهمة. الجزء الثاني يدعو بريد طريقة من مسج. يجب عليك تمرير معلمتين ؛ الأول هو عنوان url لإرسال البيانات إليه ، والثاني هو البيانات. قد تجد (بناءً على عنوان URL الذي تحاول الوصول إليه) ، أن متصفحاتك نفس الأصل قد تتدخل سياسة الأمن هنا. يمكنك تمكين تقاسم الموارد عبر المصدر للتغلب على هذا ، ولكن الإشارة ببساطة إلى عنوان URL مستضاف على نفس النطاق مثل صفحتك غالبًا ما يكون كافيًا.
تستدعي المعلمة الثانية jQuery تسلسل طريقة في النموذج الخاص بك. تصل هذه الطريقة إلى جميع البيانات من النموذج الخاص بك ، وتعدها للإرسال - إنها تسلسلها.
هذا الرمز وحده كافٍ لإرسال نموذج ، ولكن قد تجد أن الأشياء تتصرف بشكل غريب بعض الشيء. من الجدير التحقق من أدوات مطور المتصفح ، حيث تجعل هذه شبكات تصحيح الأخطاء أمرًا في غاية السهولة.
بدلا من ذلك، ساعي البريد أداة مجانية ممتازة لاختبار طلبات HTTP.
إذا كنت ترغب في إرسال نموذجك باستخدام AJAX عند الضغط على زر الإرسال ، فهذا أمر سهل. تحتاج إلى إرفاق التعليمات البرمجية الخاصة بك إلى إرسال حدث النموذج. إليك الرمز:
$ (مستند) .on ('إرسال' ، '# myForm' ، الدالة () {$ .post ('some / url' ، $ ('# myForm'). تسلسل ()) ؛ عودة كاذبة؛ });يقوم هذا الرمز بعدة أشياء. عند إرسال النموذج الخاص بك ، يأتي المستعرض الخاص بك ويقوم بتشغيل التعليمات البرمجية أولاً. ثم يرسل رمزك بيانات النموذج باستخدام AJAX. الخطوة الأخيرة المطلوبة هي منع النموذج الأصلي من الإرسال - لقد قمت بذلك بالفعل مع AJAX ، لذلك لا تريد أن يحدث ذلك مرة أخرى!
إذا كنت ترغب في أداء مهمة أخرى بمجرد انتهاء AJAX (أو ربما حتى إرجاع رسالة حالة) ، فأنت بحاجة إلى استخدام أتصل مرة أخرى. يجعل JQuery هذه الأشياء سهلة الاستخدام - ما عليك سوى تمرير وظيفة كمعلمة أخرى مثل هذه:
$ .post ('url'، $ ('# myForm'). serialize ()، الدالة (النتيجة) {console.log (النتيجة)؛ }ال نتيجة تحتوي الوسيطة على أي بيانات تم إرجاعها بواسطة عنوان URL الذي تم إرسال البيانات إليه. يمكنك بسهولة الرد على هذه البيانات:
if (النتيجة == 'Success') {// قم ببعض المهام. } آخر {/ القيام ببعض المهام الأخرى. }هذا كل ما في هذا المنشور. نأمل أن يكون لديك الآن فهم قوي لطلبات HTTP ، وكيف تعمل AJAX في سياق النموذج.
هل تعلمت أي حيل جديدة اليوم؟ كيف تستخدم AJAX مع النماذج؟ دعنا نعرف أفكارك في التعليقات بالأسفل!
ائتمانات الصورة: vectorfusionart / Shutterstock
جو خريج في علوم الكمبيوتر من جامعة لينكولن بالمملكة المتحدة. إنه مطور برامج محترف ، وعندما لا يطير بطائرات بدون طيار أو يكتب موسيقى ، يمكن العثور عليه غالبًا وهو يلتقط الصور أو ينتج مقاطع فيديو.
