آموزش ایجکس (ajax) در وردپرس

ایجاد یک درخواست اجکس و ارسال پاسخ درخواست از وردپرس به عنوان سمت سرور به جاوااسکریپت به عنوان کلاینت شامل مراحلی است که به تشریح آن می پردازیم.

سمت کلاینت

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

var data = {
    action:    ‘bmpt_myplugin_do_ajax_request’,
    some_var:  ‘some value’,
    other_var: ‘other value’
};

در میان پارامترهای ارسالی، پارامتری با عنوان action باید وجود داشته باشد که برای شناسایی درخواست در سمت سرور مورد استفاده قرار می گیرد. در صورتی که بخواهیم در خواست را با متد POST ارسال نماییم، می توانیم از کدی مشابه کد زیر استفاده نماییم:

jQuery.post( ‘http://example.com/wp-admin/admin-ajax.php’, data, function( resp ) {
    /*
    1. process response object ‘resp’
    2. update part of page
    */
});

تمامی درخواستهای اجکس در وردپرس به صفحه admin-ajax.php موجود در پوشه wp-admin ارسال و پردازش می شوند. پس از اجرای درخواست در سمت سرور، پارامتر ورودی تابع برگشتی درخواست (resp) حاوی پاسخ ارسالی سمت سرور خواهد بود که می توان با آن سمت کلاینت را تغییر و بروزرسانی لازم را انجام داد.

سمت سرور

داده ارسالی از سمت کلاینت به سرور باید شامل پارامتری به نام action باشد. از این پارامتر برای برقراری ارتباط میان یک تابع در وردپرس و درخواست اجکس استفاده می شود. در وردپرس دو هوک اکشن برای درخواست های اجکس در نظر گرفته شده است:

هوک wp_ajax_$action: برای کاربران عضو سایت اجرا می گردد.

هوک wp_ajax_nopriv_$action: برای کاربرانی که عضو سایت نیستند (بازدیدکنندگان) به اجرا در می آید.

به عنوان نمونه، با تعریف هوک اکشن زیر:

< ?php
add_action( ‘wp_ajax_bmpt_myplugin_do_ajax_request’, ‘bmpt_process_ajax’ );
? >  

شما قادر خواهید بود در تابع bmpt_process_ajax درخواست ارسالی از سمت کلاینت را دریافت، پردازش و پاسخ مناسب برای نمایش در سمت کلاینت را مهیا کنید.

< ?php
// process Ajax data and send response
function boj_myplugin_process_ajax() {
        
    // check authority and permissions: current_user_can()
        
    // check intention: wp_verify_nonce()
        
    // process data sent by the Ajax request
        
    // echo data response that the Ajax function callback will process
        
    die();
}
        
? >

پس از انجام کنترل های امنیتی، می توانید داده های ارسالی را از آرایه $_POST دریافت و پاسخ مورد نظر را برای نمایش از طریق تابع برگشتی درخواست اجکس را ایجاد کنید.

مثال:

کد سمت سرور:

<?php
add_shortcode('sentenceform','bbpf_sentence_makeshortcode');
function bbpf_sentence_makeshortcode($atts) {
//add script and style files
wp_enqueue_script('bbpf-frontend-script');
wp_enqueue_style('bbpf-frontend-style');

return ‘<div class=”main_div”></div><br/><div class=”my-wrap”><input type=”text” name=”input_sentence” /><br/>
<button class=”send_sentence”>Send</button>’;
}

add_action( 'wp_enqueue_scripts', 'bbpf_frontend_scripts' );

/**
 * Add our JS and CSS files
 */
function bbpf_frontend_scripts() {
  wp_enqueue_script( 'bbpf-frontend-script', plugins_url( 'js/script.js', __FILE__ ),array('jquery'),'1.0',false );
  wp_enqueue_style( 'bbpf-frontend-style', plugins_url( 'css/style.css', __FILE__ ) );
  wp_localize_script( 'bbpf-frontend-script', 'bbpf_ajax_url', array( 'ajax_url' => admin_url('admin-ajax.php'),'check_nonce'=>wp_create_nonce('bbpf-nonce')) );

}
add_action( 'wp_ajax_bbpf_sentence', 'bbpf_get_sentence_ajax_callback' );
 add_action('wp_ajax_nopriv_bbpf_sentence', 'bbpf_get_sentence_ajax_callback');

//callback function to show sentence
 function bbpf_get_sentence_ajax_callback(){

check_ajax_referer( 'bbpf-nonce', 'security' );
//get sent params
$sentence= isset($_POST['sentence'])?sanitize_text_field($_POST['sentence'])):’’;
$output ='';

$user_id = get_current_user_id();
if(!empty($user_id))
{
  $output = ‘<p>The Message of User with ID ’.$user_id.’ Is: ‘.$sentence.’</p>’;
   }

     echo $output;
wp_die();
}
?>

سمت کلاینت:

jQuery(document).ready(function() {
     jQuery(document).on('click','.send_sentence', function(e) {
    e.preventDefault();
	jQuery.ajax({
		type: "POST",                 // use $_POST request to submit data
		url: bbpf_ajax_url.ajax_url,      // URL to "wp-admin/admin-ajax.php"
		data: {
			action     : 'bbpf_sentence', // wp_ajax_*, wp_ajax_nopriv_*
            security : bbpf_ajax_url.check_nonce,
            sentence : jQuery(‘input[name=input_sentence]’).val()
		},
		success:function( resp ) {
        //display AJAX results
		  jQuery(‘.main_div’).html( resp); //

		},
		error: function(){
			console.log(errorThrown); // error
		}
	});

}
});

پست های مرتبط

پیام بگذارید