Аjax wordpress – простой пример для новичков

ajax wordpress

У wp выполнение ajax запросов происходит намного проще, чем это можно подумать.

Созданине ajax запроса можно разделить на несколько этапов:

  • кнопки
  • запрос
  • обработчик

Создаем кнопки (html) 

в шаблоне темы или любом месте где это вам удобно создаем вот такие кнопки:

<div class="sale_buton" data-price = "123">расчитать скидку</div>

<div class="results"></div> <!-- здесь будет выводится результат -->


Запрос (ajax):

   <script type="text/javascript"> 
        jQuery(document).ready(function ($) { 
            $('.sale_buton').click(function () { // кликнули на кнопку
                $.ajax({
                    url: '/wp-admin/admin-ajax.php', // сделали запрос 
                    type: "POST", // указали метод
                    data: { // передаем параметры отправляемого запроса
                        action: 'my_ajax_action', // вызываем хук который обработает наш ajax запрос
                        price: $(this).data('price'), // передаем параметры из кнопки 
                    },

                    success: function (data) {// получаем результат в переменной data
                                $('.results').html(data); // выводим результат в новый див 

                    }
                }); 
            });   
        }); 
    </script>

Обработчик (php)

Обработчик должен находится в файле function.php вашей темы

// проверка на скидки
 add_action("wp_ajax_my_ajax_action", "k_ajax_my_ajax_action");// для фронтенда 
add_action("wp_ajax_nopriv_my_ajax_action", "k_ajax_my_ajax_action");// для админки
function k_ajax_my_ajax_action(){ // функция которая вызывается
  if ($_POST['price']==123) {// проверяем, если цена равна 123
    echo "цена равна 123"; // выводим результат в <div class="results"></div> 
  }else {
    echo "цена не равна 123";// выводим результат в <div class="results"></div> 
  } 
  wp_die();
 }

Дополнительно:

данный метод очень простой и рабочий, здесь можно его конечно усложнить и упростить, взять встроенные переменные такие как ajaxurl  итд.  Но пост был создан исключительно для понимания как работает ajax в wordpress для новичков.

Поделись с друзьями:

Добавить комментарий

* Все комментарии проходят модерацию