تعداد بازدید: 713

Ajax در وردپرس

ajax یک درخواست به سرور (request) و دریافت پاسخ (Response) بدون refresh صفحه از طریق شی xmlHttpRequest است.

Request : درخواست با یکی از متد های POST یا GET همراه با یک سری پارامتر به یک url در سرور ارسال میشه.

Response : این پاسخ می تونه عدد 0 یا 1 یا array یا object باشه.

Ajax در وردپرس

نکته ۱ : تمامی درخواست های ajax در وردپرس به فایل wp-admin/admin-ajax.php ارسال میشه . پس url درخواست میشه آدرس فایل admin-ajax.php

نکته ۲ : در درخواست خودمون ما باید پارامتر action رو به نام دلخواه خودمون به این فایل ارسال کنیم ( با یکی از متد های POST یا GET ) که در ادامه از  مقدار این action برای ساخت hook هایی که قراره درخواست رو پردازش کنه و پاسخ رو بفرسته استفاده می کنیم.

نکته ۳ : فایل admin-ajax دو hook میسازه که به وسیله اون ها می تونیم درخواست ارسال شده رو مدیریت کنیم و پاسخ رو برگردونیم.

wp_ajax_{$youraction}

wp_ajax_nopriv_{$youraction}

همون طور که میبینید این hook ها با استفاده از مقدار action که در نکته ۲ گفتیم ساخته شده که تابعی که به این hook ها قلاب بشه می تونه درخواست ما رو مدیریت کنه.

مورد دوم (wp_ajax_nopriv_{$youraction}) تنها برای زمانی فراخوانی میشه که کاربر لاگین نباشه . پس اگر برای کاربران غیر لاگین در قسمت front وب سایت نیازی نداشتید این رو می تونید اجرا نکنید.

اگر در پنل ادمین از ajax استفاده می کنید نیازی به استفاده از hook (wp_ajax_nopriv_{$youraction}) ندارید.

هر درخواستی به فایل admin-ajax.php ارسال بشه (با هر روشی) و با خودش پارامتر action داشته باشه این فایل دو hook بالا رو با فرمت مقدار پارامتر action میسازه. به طور مثال لینک زیر یک درخواست به روش معمولی هست که پاسخ توابع قلاب شده به hook های بالا رو برمیگردونه و اگر این توابع set نشده باشن مقدار صفر رو بر میگردونه.

مطابق با این درخواست دو hook زیر ساخته میشن:

نکته ۴ : برای دریافت آدرس فایل admin-ajax و ارسال اون به فایل جاوا اسکریپت خودتون می تونید از تابع wp_localize_script استفاده کنید.

تابع wp_localize_script

این تابع یک object با مقادیر تعیین شده توسط شما به یک اسکریپت enqueue شده می فرسته .

پس این تابع بعد از یک اسکریپت enqueue شده و قلاب به wp_enqueue_scripts یا admin_enqueue_scripts میشه.

پارامتر های این تابع به شرح زیر است :‌

  • handle : این handler همون اسکریپتی هست که قراره شی و مقداریرش به اون ارسال بشه.
  • name :‌ این نام object هست که قراره ارسال بشه .
  • data :‌ مقادیر مورد نظر برای object در پارامتر قبلی هست که باید به صورت آرایه php داده بشه .

نکته ۱ : این تابع باید بوسیله handler اسکریپت فراخوانی شده است. پس تا زمانی که اسکریپت enqueue نشده نمیشه بهش پارامتر فرستاد.

نکته ۲ : همون طور که میدونید این تابع باید در قلاب wp_enqueue_script تعریف بشه . در صورتی که شما در میان شروط کد های view یا همون html نیاز پیدا کردید که پارامتر بفرستید نیازی نیست که به مکان خاصی قلاب کنید. مستقیم تابع رو فراخوانی کنید.

یک مثال از ajax در وردپرس

دو قسمت سرور و کلاینت به شرح زیر هستند:

قسمت سرور (رجیستر کردن اسکریپت ها و ارسال پاسخ در hook های ایجاد شده)

قسمت کلاینت (ارسال درخواست به وسیله ajax با پارامترهای action , key)

خوب در ابتدا ما اومدیم و دو تا ثابت با نام های ADMINAJAX و TDU تعریف کردیم که از اون ها استفاده می کنیم.

تابعی با نام  تعریف کردیم که در اون یه اسکریپت با handler با نام main-script تعریف کردیم و به وسیله تابع wp_localize_script شی بانام main_obj رو با مقادیر array("admin_url" => ADMINAJAX) به اون اسکریپتی که در ابتدا تعریف کردیم (اسکریپت با handler با نام main-script) فرستادیم.

خوب در مرحله بعد به قسمت کلاینت میریم جایی که یک درخواست با متد POST به سرور با آدرس ADMINAJAX (که مقدارش از شی main_obj گرفته شده) ارسال کردیم و دو پارامتر action و key رو همراهش فرستادیم تا در قسمت سرور به وسیله دو hook که ساخته شده پاسخ درخواست رو پردازش کنیم.

در قسمت سرور تابعی با نام rudy_send_response که به hook با مقدار wp_ajax_ajax_begin قلاب شده و برای کاربران لاگین اجرا میشه و خروجی میده.

تابعی با نام rudy_logout_user داریم که به hook با نام wp_ajax_nopriv_ajax_begin قلاب شده و برای کاربران غیر لاگین اجرا میشه و خروجی میده .

در نهایت در قسمت کلاینت خروجی هایی که در قسمت سرور ساختیم در console مرورگر لاگ میشه.

نکته : اگر تابع wp_die رو آخر تابع نگذارید به انتهای خروجی response یک 0 اضافه میشه.

نکته مهم : برای ارسال اطلاعات به صورت رشته JSON در تابع خودتان (سمت سرور) از تابع wp_send_json() استفاده کنید . پارامتر ورودی این تابع آرایه یا شی ساخته شده به زبان پی اچ پی می باشد و در آن طرف (سمت کلاینت) نیازی به تبدیل رشته به فایل JSON با استفاده از JSON.parse() نمی باشد و به راحتی می توان از شی JSON استفاده کرد.

 

مطالب مشابه

Settings API در ووکامرس

ما برای ساخت پنل تنظیمات برای افزونه ها از api خود وردپرس استفاده می کردیم. حال این که افزونه مکمل برای ووکامرس می...

آموزش نکات و تکنیک های برنامه نویسی وردپرس

Settings API در وردپرس

وردپرس برای ساخت پنل تنظیمات شبیه به پنل تنظیمات پیش فرض خودش API هایی رو قرار داده . Settings API , Options API دو...

اشتراک گذاری :

ابوالفضل صباغ

برنامه نویسی رو با زبان C در هفده سالگی شروع کردم . در حال حاضر به برنامه نویسی php برپایه معماری MVC , HMVC و همچنین سیستم مدیریت محتوای WordPress علاقه مند هستم و دوست دارم اطلاعاتم رو با شما به اشتراک بگذارم.

۰ دیدگاه برای Ajax در وردپرس

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *