الإعلانات
AJAX هي تقنية ويب رائعة نقلتنا إلى ما هو أبعد من مجرد "انقر فوق الارتباط ، انتقل إلى صفحة أخرى" هيكل الإنترنت 1.0.
AJAX ، والتي تعني جافا سكريبت و XML غير متزامن، يمكّن مواقع الويب من جلب المحتوى ديناميكيًا وعرضه بدون انتقال المستخدم بعيدًا عن الصفحة الحالية. وهذا يؤدي إلى تجربة مستخدم أكثر تفاعلية ، ويمكن أن يسرع الأمور أيضًا نظرًا لعدم الحاجة إلى تحميل صفحة ويب جديدة كاملة. لحسن الحظ ، من السهل جدًا الاستفادة من AJAX من داخل بيئة WordPress ، وسأوضح لك اليوم كيفية ذلك.
يجب اعتبار برنامج Ajax التعليمي هذا متقدمًا إلى حد ما ، ويستمر من آخر مرة تعلمنا فيها كيفية استخدام جداول قاعدة البيانات المخصصة العمل مع جداول قاعدة البيانات المخصصة في WordPressسيكشف المسح السريع لصفحة Best of WordPress Plugins عن بعض الطرق الفريدة والمتخصصة التي يمكن أن تجعل مدونتك تعمل بجد. ماذا لو كان لديك بالفعل قاعدة بيانات ... اقرأ أكثر من داخل قالب WordPress - في المثال الخاص بي ، تم استخدام جدول موجود بسيط لبيانات العملاء. عندما يتعلق الأمر بإدراج الأشياء مرة أخرى في قاعدة البيانات ، سنستخدم القليل من سحر AJAX داخل WordPress.
وبالتالي ، ستشير جميع التعليمات البرمجية في البرنامج التعليمي اليوم إلى ما كتبناه في المرة السابقة ، ولكن إذا كنت تبحث فقط عن كيفية تنفيذ AJAX في WordPress ، فستكون ذات صلة بنفس القدر.
لماذا استخدام AJAX؟
يرتبط الاستخدام الأكثر شيوعًا لـ AJAX بالنماذج - التحقق مما إذا تم أخذ اسم مستخدم ، أو ملء باقي النموذج بأسئلة مختلفة اعتمادًا على إجابة معينة تقدمها. بشكل أساسي ، تستخدم AJAX كلما أردت حدثًا (مثل نقر المستخدم على شيء ما أو كتابة شيء ما) مرتبطة ب من جانب الخادم العمل الذي يحدث في خلفية.
سنستخدمها لإضافة إدخالات جديدة إلى جدول قاعدة بيانات العملاء المخصص المهم الخاص بنا ، ولكن ربما يمكنك التوصل إلى شيء أكثر إثارة.
نظرة عامة على كيفية استخدام AJAX في WordPress
- عدّل نموذجك المخصص لتضمين نموذج أو حدث جافا سكريبت الذي سيرسل البيانات عبر jQuery AJAX إلى admin-ajax.php بما في ذلك أي بيانات مشاركة تريد تمريرها. تأكد من تحميل jQuery.
- حدد وظيفة في موضوعك function.php; قراءة متغيرات النشر ، وإرجاع شيء ما إلى المستخدم إذا كنت ترغب في ذلك.
- إضافة خطاف عمل AJAX لوظيفتك.
إنشاء النموذج
دعنا نبدأ بإنشاء نموذج بسيط في الواجهة الأمامية لإدخال تفاصيل العميل الجديد. لا يوجد شيء معقد ، فقط استبدل الجزء الرئيسي من قالبك المخصص بهذا الرمز الذي بدأناه الأسبوع الماضي ، حول المكان الذي يحدث فيه فحص is_user_logged_in ():
إذا (is_user_logged_in ()):؟>
الشيء الوحيد الذي قد يبدو غريبا بالنسبة لك هو أن هناك استخدام حقل إدخال مخفي يسمى عمل - يحتوي هذا على اسم الوظيفة التي سنقوم بتشغيلها عبر AJAX.
جهاز استقبال PHP
بعد ذلك ، افتح function.php وأضف السطر التالي لضمان تحميل jQuery على موقعك:
wp_enqueue_script ('jquery') ؛
الهيكل الأساسي لكتابة مكالمة AJAX هو كما يلي:
وظيفة myFunction () { //قم بعمل ما. موت()؛ } add_action ('wp_ajax_myFunction'، 'myFunction')؛ add_action ('wp_ajax_nopriv_myFunction'، 'myFunction')؛
هذين السطرين الأخيرين هما خطافات عمل تخبر WordPress "لدي وظيفة تسمى myFunction ، وأريدك أن تستمع إليها لأنه سيتم استدعاؤها من خلال واجهة AJAX" - الأول للمستخدمين على مستوى الإدارة ، بينما wp_ajax_nopriv_ للمستخدمين الذين لم يسجلوا الدخول. إليك الرمز الكامل لـ function.php التي سنستخدمها لإدراج البيانات في جدول عملائنا الخاص ، والذي سأشرحه قريبًا:
wp_enqueue_script ('jquery') ؛ function addCustomer () {global $ wpdb؛ $ name = $ _POST ['name'] ؛ $ phone = $ _POST ['phone'] ؛ $ email = $ _POST ['email'] ؛ $ address = $ _POST ['address'] ؛ إذا ($ wpdb-> insert ('customers'، array ( 'name' => $ name، 'email' => $ email، 'address' => $ address، 'phone' => $ phone. )) FALSE) {echo "Error"؛ } آخر { صدى "الزبون". اسم $. تمت إضافة "" بنجاح ، معرف الصف هو ". $ wpdb-> insert_id؛ } موت()؛ } add_action ('wp_ajax_addCustomer'، 'addCustomer') ؛ add_action ('wp_ajax_nopriv_addCustomer'، 'addCustomer') ؛ // غير مطلوب حقًا
كما في السابق ، نحن نعلن wpdb دولار عالمي ليتيح لنا الوصول المباشر إلى قاعدة البيانات. ثم ننتزع بريد المتغيرات التي تحتوي على بيانات النموذج. يحيط بجملة IF هي الوظيفة $ wpdb-> إدراج، وهو ما نستخدمه لإدراج البيانات في جدولنا. نظرًا لأن WordPress يوفر وظائف محددة لإدراج المشاركات المنتظمة والبيانات الوصفية ، فهذا $ wpdb-> إدراج تستخدم الطريقة بشكل عام للجداول المخصصة فقط. تستطيع اقرأ المزيد عنها في الدستور الغذائي ، ولكن في الأساس يأخذ اسم الجدول ليتم إدراجه ، متبوعًا بـ مجموعة مصفوفة من أزواج العمود / القيمة.
ال خاطئة يتحقق لمعرفة ما إذا كانت وظيفة الإدراج فشلت ، وإذا كان الأمر كذلك ، فإنها تخرج "خطأ“. إذا لم يكن الأمر كذلك ، فنحن نرسل فقط رسالة إلى المستخدم تمت إضافة العميل X، وترديد الصدى $ wpdb-> insert_id المتغير ، الذي يشير إلى متغير الزيادة التلقائية لآخر عملية إدخال حدثت (على افتراض أنك قمت بتعيين حقل يتزايد تلقائيًا ، مثل رقم التعريف).
أخيرا، موت() سيتجاوز الافتراضي يموت (0) المقدمة من WordPress - هذا ليس ضروريًا على هذا النحو ، ولكن بدونه ستحصل عليه 0 يتم إلحاقه بنهاية أي شيء ترسله إلى القالب.
جافا سكريبت
الخطوة الأخيرة هي الجزء السحري - جافا سكريبت الفعلي الذي سيبدأ استدعاء AJAX. ستلاحظ أنه في النموذج الذي أضفناه سابقًا ، تم ترك حقل الإجراء فارغًا. هذا لأننا سوف نبطل هذا بمكالمة AJAX. الطريقة العامة للقيام بذلك ستكون:
jQuery.ajax ({type: "POST"، url: "/wp-admin/admin-ajax.php"، // our PHP handler file data: "myDataString"، النجاح: الوظيفة (النتائج) {// افعل شيئًا مع البيانات المعادة})} ؛
هذه هي البنية الأساسية لمكالمة AJAX التي سنستخدمها ، ولكن بالتأكيد ليست الطريقة الوحيدة للقيام بذلك. قد تتساءل لماذا نشير إليها الفسفور الابيض المشرف هنا ، على الرغم من أن هذا سيكون في الواجهة الأمامية للموقع. هذا فقط حيث معالج AJAX يقيم ، سواء كنت تستخدمه لوظائف الجانب الأمامي أو الإداري - محيرة ، أعرف. قم بلصق التعليمة البرمجية التالية مباشرة في قالب العميل:
في السطر الأول ، نعلق دالة ajaxSubmit على النموذج الذي أنشأناه سابقًا - لذلك عندما ينقر المستخدم على إرسال ، يمر عبر وظيفة AJAX الخاصة. بدون هذا ، فإن نموذجنا لن يفعل شيئًا. في موقعنا ajaxSubmit () الوظيفة ، أول شيء نقوم به هو تسلسل () الاستمارة. هذا يأخذ فقط كل قيم النموذج ، ويحولها إلى سلسلة طويلة واحدة ستقوم PHP بتحليلها لاحقًا. إذا كان كل شيء يعمل بشكل صحيح ، فسنضع البيانات التي تم إرجاعها في DIV بمعرف التعليقات.
هذا هو. احفظ كل شيء وقم بتحديث ومحاولة إرسال بعض بيانات النموذج. إذا كنت تواجه مشاكل ، يمكنك العرض الكود الكامل لقالب الصفحة هنا (بناءً على الموضوع الحادي عشر الافتراضي)، والرمز المراد إضافته إليه function.php هنا(لا تستبدل ، فقط أضف هذا في النهاية).
أشياء لتأخذها بالحسبان
الأمان: هذا الرمز غير جاهز للإنتاج وهو لأغراض التعلم فقط. لقد تركنا نقطة رئيسية واحدة ، وهي استخدام wp-nonce - رمز لمرة واحدة يتم إنشاؤه بواسطة WordPress يضمن أن طلب AJAX لا يأتي إلا من المكان المقصود منه ؛ مفتاح مرور إذا شئت. بدون ذلك ، يمكن استغلال وظيفتك بشكل فعال لإدخال بيانات عشوائية. مع ذلك ، ليست هجمات إدخال SQL مشكلة ، لأننا وجهنا الاستعلامات عبر WordPress $ wpdb-> إدراج الوظيفة - ينظف WordPress أي مدخلات ويجعلها آمنة.
تحديث جدول العملاء: في الوقت الحالي ، نرسل فقط رسالة تأكيد ، ولكن لا يتم تحديث جدول العملاء - لن ترى الإدخالات الإضافية إلا إذا قمت بتحديث الصفحة (أي نوع من الهزائم الغرض من القيام بذلك كله عبر AJAX). تحقق مما إذا كان يمكنك إنشاء وظيفة AJAX جديدة يمكنها إخراج الجدول ديناميكيًا.
التحقق من الإدخال: نظرًا لعدم وجود عملية تحقق من صحة بيانات النموذج ، فمن الممكن بالفعل إضافة إدخالات فارغة أو إدخالات متعددة إذا ضغطت مرات عديدة. قد يكون من المفيد إجراء بعض عمليات التحقق من الإدخال في حقول النموذج ، ومسحها عند اكتمالها ، بالإضافة إلى SQL للتحقق من البريد الإلكتروني أو رقم الهاتف غير الموجود بالفعل في قاعدة البيانات.
هذا كل شيء مني هذا الأسبوع - إذا واجهتك أي مشاكل في متابعة هذا البرنامج التعليمي ، فلا تتردد في التواصل عبر التعليقات وسأبذل قصارى جهدي لمساعدتك ؛ أو إذا كنت تحاول تخصيص هذا بطريقة ما ، فلا تتردد في رد الأفكار. آمل أن يوضح هذا حقًا مقدار ما يمكنك القيام به من داخل WordPress ببساطة عن طريق الجمع بين القليل من JavaScript و PHP و MySQL. كما كان الحال دائمًا ، لا تنسى الاطلاع على كل ما لدينا مقالات وورد.
جيمس حاصل على درجة البكالوريوس في الذكاء الاصطناعي ، وهو حاصل على شهادة CompTIA A + و Network +. وهو المطور الرئيسي لـ MakeUseOf ، ويقضي وقت فراغه في لعب كرة الطلاء VR وألعاب الطاولة. لقد كان يبني أجهزة الكمبيوتر منذ أن كان طفلاً.
