WordPress — ajax на бекенді – …про web і не тільки

Нема часу пояснювати що таке Ajax та які ніштяки він може видати в плані юзабіліті. Приклад роботи асинхронної передачі я спробую пояснити на одній задачі.

Отже, Ви маєте перелік публікацій та Вам потрібно виводити їхній вміст. Як це робити.

Для початку ось так виглядає наш список.

<ul>
<li>
 <a href="#" class="calculator-price-id" attrid="963"><b>[2017-05-09]</b> item</a></li>
<a href="#" class="calculator-price-id" attrid="964"><b>[2017-05-09]</b> item</a></li>
<a href="#" class="calculator-price-id" attrid="965"><b>[2017-05-09]</b> item</a></li>
<a href="#" class="calculator-price-id" attrid="966"><b>[2017-05-09]</b> item</a></li>
</ul>

Як Ви вже здогадались, ID матеріалу я запакував в параметр attrid. Спробую описати поданий нижче код:

створюємо подію при кліці на клас calculator-price-id;
магічним чином (.attr(‘attrid’)) витягуємо ідентифікатор та присвоюємо його змінній;
формуємо масив для передачі: значення action Ви потім ще побачите яко частку в назвах екшинів, ну а attrid — це власне те, що передаємо;
response — це відповідь, яку ми отримуємо завдяки функції. Тут Ви бачите, що я її пакую в контейнер з ідентифікатором #message-contaiter.

/**
* ajax request
*/

add_action('admin_print_footer_scripts', 'my_action_javascript', 99);
function my_action_javascript() {
 ?>
 <script type="text/javascript" >
 jQuery('.calculator-price-id').click(function($) {
 var attrid = jQuery(this).attr('attrid');
 //alert (attrid);

 var data = {
 action: 'my_action',
 attrid: attrid
 };

// отримуємо відповідь
 jQuery.post( ajaxurl, data, function(response) {
 jQuery('#message-contaiter').empty();
 jQuery('#message-contaiter').prepend(response);
 });
 });
 </script>
 <?php
}

UPD Можна додатково встановлювати деякі ніліштування. Цей код встановлюється перед функцією аяксу й запускає скажімо анімацію прелоадера.

function myFunc333(){
 alert ('good connection');
 }

jQuery.ajaxSetup({
 beforeSend: myFunc333
 });

Ок, залишилась дурниця — прописати функцію, яка прийматиме та оброблятиме наш запит. Зверніть увагу на add_action(wp_ajax_my_action). Я вже згадував, що зазначений нами перший параметр буде фігурувати тут в якості частини назви.

Як там що і чому я толком не знаю, можу лишень сказати, що цей едекшн формується за принципом: “wp_ajax_” + ваш параметр action, який ми задаємо при формуванні запиту.

add_action('wp_ajax_my_action', 'my_action_callback');
function my_action_callback() {
 $attrid = intval( $_POST['attrid'] );

$content_post = get_post($attrid);
$content = $content_post->post_content;
echo $content;

wp_die(); // красиво закриваємо за собою двері, щоб у відповідь не попадало нічого зайвого
}

Тут ми приймаємо наш ID в $_POST[‘attrid’] і витворяємо з ним запит на вивід контенту вордпресівської публікації. Більш прошареним способом виводити публікації можна ще завдяки цій функції. Сподіваюсь ми ще продовжимо тему Ajax , а на разі бажаю Вам рівного коду.

Залишити відповідь Скасувати відповідь