ایجاد یک درخواست اجکس و ارسال پاسخ درخواست از وردپرس به عنوان سمت سرور به جاوااسکریپت به عنوان کلاینت شامل مراحلی است که به تشریح آن می پردازیم.
سمت کلاینت
هنگامی که رویدادی سمت کلاینت مانند کلیک بر روی دکمه، پایان بارگذاری صفحه، سرآمدن فاصله زمانی یک تایمر و یا سایر رویدادهایی که در جاوا اسکریپت تعریف شده هستند، اتفاق می افتد، داده هایی که باید در درخواست اجکس ارسال شوند، دریافت و پردازش می شوند.
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 } }); } });