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

Ajax در وردپرس

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

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

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

این درخواست که با استفاده از جاوا اسکریپت ارسال می شه و در اون سمت وب سرویس (تابع یا متد PHP) اون رو تحلیل می کنه و Response (در فرمت های لازم) لازم رو بر می گردونه.

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 نشده باشن مقدار صفر رو بر میگردونه.

https://gnutec.net/wp-admin/admin-ajax.php?action=test

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

wp_ajax_test
wp_ajax_nopriv_test

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

تابع wp_localize_script

<?php wp_localize_script( $handle, $name, $data ); ?>

این تابع یک 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 های ایجاد شده)

<?php
define("TDU" , get_template_directory_uri());
define("ADMINAJAX" , admin_url( "admin-ajax.php" ));
if(!function_exists("rudy_enqueue_scripts")){
    function rudy_enqueue_scripts(){
        wp_enqueue_script( "main-script", TDU . "/assets/js/scripts.js", array("jquery"), TRUE );
        wp_localize_script( "main-script", main_obj , array("admin_url" => ADMINAJAX) );
    }
}
add_action("wp_enqueue_scripts" , "rudy_enqueue_scripts");

if(!function_exists("rudy_send_response")){
    function rudy_send_response(){
        echo $_POST['key'];
        wp_die();
    }
}
if(!function_exists("rudy_logout_user")){
    function rudy_logout_user(){
        echo "you must login to see response";
        wp_die();
    }
}
add_action("wp_ajax_ajax_begin","rudy_send_response");
add_action("wp_ajax_nopriv_ajax_begin","rudy_logout_user");

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

jQuery(document).ready(function($){
    $.ajax({
        url : main_obj.admin_url,
        type : "post",
        data : {
            action : "ajax_begin",
            key : "it work"
        },
        success : function(respons){
            console.log(respons);
        }
    });
});

خوب در ابتدا ما اومدیم و دو تا ثابت با نام های 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 استفاده کرد.

 

مطالب مشابه

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

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

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

  1. با سلام و تشکر از زحمات شما. اینکه این مقاله را به صورت نکته به نکته و در قالب نکات ارائه کردید سبک جدیدی بود و خیلی عالی بود. با آرزوی موفقیت برای شما

  2. سلام ممنون از آموزش خوبتون
    اگر بخوایم مقداری رو که از کاربر از طریق Ajax دریافت میکنیم در همون صفحه دریافت کنیم و عملیاتی رو روش انجام بدیم به چه صورت میشه؟
    برای مثال دوتا select داریم که مربوط میشه به شهر و استان میخوایم وقتی کاربر استان رو انتخاب کرد ما به صورت Ajax این استان رو دریافت کنیم و مقدارشو تحت مثلا یه متغیر پاس بدیم دوباره به همین صفحه تا شهر های اون استان رو فقط در select دوم نشون بدیم

    • با سلام و احترام
      برای این کار روال زیر را طی کنید:‌
      ۱. درخواست اول ارسال شناسه استان به سرور . در سرور با استفاده از شناسه استان لیست شهر ها را دریافت کنید
      ۲. پاسخ درخواست اول می تواند لیست استان ها به صورت html باشد . این لیست را با استفاده از جاوا اسکریپت در مکان مورد نظر لود کنید.

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

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