إرسال نموذج ajax إلى الخادم باستخدام jquery

2024 مؤلف: Trinity Chesterton | [email protected]. آخر تعديل: 2024-02-02 14:31

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

إرسال نموذج ajax: ربط المكتبات

تضمين مكتبة jquery في index.php.

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




توصيل وإعداد المستندات
1. قم بإنشاء مستند.php في المجلد الذي يحتوي على الموقع بأي اسم مناسب لك - سيرسل هذا نموذج ajax php. في ذلك يمكنك الكتابة بأي تنسيق سيتم عرض النص مع الرسالة. على سبيل المثال ، form1.php.





2. في مجلد ملفات javascript ، قم بإنشاء ملف.js بامتدادأي اسم مناسب. على سبيل المثال ، form.js.





3. قم بتوصيل هذا المجلد بالمستند الخاص بك.



4. قم بإنشاء نموذج بالمعلمات التالية:



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

إرسال نموذج jquery ajax
1. في ملف form.js الذي تم إنشاؤه ، تحتاج إلى كتابة الكود المسؤول عن جعل الملف يعمل بعد تحميل صفحة الموقع بالكامل.


$ (مستند). جاهز (الوظيفة () {// سيتم تشغيل الكود التالي هنا}) ؛

2. ثم تحتاج إلى تخصيص زر الإرسال. افعل كل شيء في نفس الملف.


$ ("form"). submit (function (event) {event.preventDefault () ؛ // الكود التالي سوف يكتب هنا}) ؛

الجزء الأول من الكود مسؤول عن اختيار العنصر على الصفحة ، والثاني مسؤول عن منع الإجراء الافتراضي.
3. ثم ، على سبيل المثال ، قم بتقديم نموذج ajax عند النجاح.


$. ajax ({type: $ (this).attr ('method')، url: $ (this).attr ('action')، data: new FormData (this) ، contentType: false، cache: false، processData: false، Success: function (نتيجة) {alert (نتيجة)؛}})؛

فيما يلي وصف تفصيلي لكل إعداد.

نوع -هذا هو نوع الطلب الذي يتم تقديمه في النموذج ؛ نظرًا لأنه يكلف POST ، سيكون نوع الطلب مناسبًا ؛
هذا - اختيار العنصر داخل البناء ؛
attr - اختصار للتجاذب (جاذبية) ، أي ، يتم جذب معلمة معينة من الهدف المحدد (النموذج) ؛
url - المعلمة المسؤولة عن مكان إرسال الطلب ؛ في هذه الحالة ، ما هو مكتوب في معلمات النموذج (form1.php) ؛
data - يحدد بيانات النموذج ؛
contentType - مسؤول عن إرسال الرؤوس إلى الخادم ؛ في هذه الحالة ليست هناك حاجة ؛
cache - مسؤول عن حفظ ذاكرة التخزين المؤقت للمستخدم ؛
processData - مسؤولة عن تحويل البيانات إلى سلسلة ؛
نجاح - يعرض نتيجة إرسال بيانات ناجح ؛ لذلك ، إذا كان إرسال البيانات ناجحًا ، فسيتم تنفيذ إجراءات الوظيفة.

4. تم ، الآن عند إرسال نموذج ajax ، ستتلقى البيانات دون تحديث الصفحة.
يمكن تغيير النتيجة باستخدام ملف form1.php ، حيث يمكنك تحديد ما سيتم عرضه بالضبط كنتيجة لذلك. على سبيل المثال ،
يمكنك تجربة وإنشاء فحص لصحة إدخال بيانات معينة: إذا كانت البيانات غير صحيحة ، فسيتم عرض الرسالة المطلوبة ، وإلا ستعيد التوجيه إلى الصفحة الصحيحة. أشياء أخرى كثيرة ممكنة أيضًا ، مهما شاء قلبك.





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

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