كيفية عمل نموذج AJAX في jQuery

عادةً ما تعمل نماذج موقع الويب على أساس جلب متصفح المستخدم صفحة جديدة عند إرسال النموذج. ومع ذلك ، باستخدام AJAX و jQuery ، يمكنك إنشاء نموذج ويب يتم فيه التقاط بيانات المستخدم وإرسالها إلى الخادم ومعالجتها ، ثم تتم كتابة الإجابة في الصفحة الحالية. تتضمن العملية ترميز HTML ، JavaScript ، بما في ذلك jQuery ، ولغة برمجة نصية من جانب الخادم مثل PHP. يعتمد مقدار المعالجة من جانب الخادم على ما تريد القيام به مع بيانات المستخدم المرسلة.

1.

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

يمكن أن يظهر هذا الترميز في أي مكان في قسم النص الأساسي بصفحة HTML. يتضمن النموذج تسمية وحقل نص وزر "إرسال".

2.

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

$ (مستند). ready (function () {$ ('# submit'). انقر فوق (function () {

var word = $ ("input # word"). val ()؛ $ .ajax ({url: "handle_data.php" ، اكتب: "GET" ، البيانات: "word =" + word ،

ذاكرة التخزين المؤقت: false ، النجاح: function (html) {

$ ('# form_area'). html ("شكرًا على إرسال كلمتك!") ؛ }})؛ عودة كاذبة؛ })؛ })؛

يلتقط هذا الرمز النص الذي أدخله المستخدم عندما ضغط على الزر "إرسال". ثم يقوم باستدعاء وظيفة jQuery AJAX ، وتمريرها بالبيانات بالإضافة إلى تفاصيل البرنامج النصي من جانب الخادم. يرشد قسم AJAX المتصفح أيضًا لاستبدال النموذج في الصفحة عند تلقي النتيجة من الخادم ، وإدخال رسالة قياسية في النموذج.

3.

قم بإنشاء البرنامج النصي من جانب الخادم. تحدد شفرة المثال برنامجًا نصيًا لـ PHP يحمل الاسم "handle_data.php" والذي يتم تخزينه على نفس الخادم كصفحة الويب. يمكنك تغيير هذا ليناسب موقعك الخاص ، ولكن قم بإنشاء برنامج نصي PHP أو ASP في محرر نصوص ، وحفظه باسم من اختيارك وتغيير شفرة jQuery لمطابقته. يجب تخصيص محتوى النص البرمجي من جانب الخادم وفقًا لاحتياجات موقعك الخاص. على سبيل المثال ، قد ترغب في ربط البيانات بقاعدة بيانات. تلتقط شفرة عينة PHP التالية ببساطة البيانات التي تم تمريرها:

تطالب قيمة الإرجاع الحقيقية المستعرض بكتابة الرسالة في صفحة المستخدم.

تلميح

• يمكنك التعامل مع بيانات XML أو الاتصال بقاعدة بيانات MySQL داخل البرنامج النصي الخاص بالخادم ، إذا كان ذلك يناسب موقعك.

تحذير

• نظرًا لأن jQuery و AJAX يعتمدان على JavaScript ، فمن الجيد إجراء الاختبار في متصفحات الويب المختلفة.