Правильный AJAX для WORDPRESS

• 
  Vadim Tsukanov
  Разработчик
• Дата публикации
  26.01.2020
• Категория
  Wordpress

Какие только способы я не видел, кто-то делает шаблон, кто-то использует API. На самом деле все очень просто…

Итак, будем решать задачку. Первое что необходимо:

Создаем экшены. Замечу,что можно повесить различные экшены для авторизованных и не авторизованных пользователей.

wp_ajax_(action) — для авторизованных

wp_ajax_nopriv_(action) — для неавторизованных

У меня метод называется send_mistakes, прописываем экшены в functions.php

add_action( 'wp_ajax_sendMistakes', 'sendMistakes' );
add_action( 'wp_ajax_nopriv_sendMistakes', 'sendMistakes' );

Как видно по коду — я использую одну и туже функцию для всех групп пользователей.

Объявляем и пилим метод для ajax

function sendMistakes()
{
    //выполняем все,что необходимо;
   $result = array(
       'status' => 'success',
       'message' => 'данные отправлены'
    );
    echo json_encode($result);
    wp_die();
}

wp_die() аналогичен базовой функции die(). Прекращает выполнение и т.д.

Чтобы подключить JS файл и дать еще возможность работать с нативными методами, необходимо локализовать скрипт. Для этого в functions.php добавляем:

wp_register_script('filter', get_template_directory_uri() . '/js/filter.js', array('jquery'),'1.1', true);
wp_enqueue_script('filter');
wp_localize_script( 'filter','ajaxObj',array('url' => admin_url('admin-ajax.php')) );

Код выше подключает файл filter.js и позволяет обращаться ему с родными методами.

JS код в файле filter.js выглядит следующим образом:

    $('#send_mistakes').on('click', function(event) {
        event.preventDefault();
        var mistakestext =$('#mistakes_text').val();
        if(mistakestext ==''){
        }else{
            $.ajax({
                url:  ajaxObj.url,
                type: 'POST',
                dataType: 'html',
                data: $("#mistakes_form").serialize() + '&action=sendMistakes',
                success:function(response){
                    if(response.status == 'success'){
                        console.log('all done');
                    }
                }
            })
        }
    });

По сути, из особенностей тут — url: ajaxObj.url и &action=sendMistakes

Вот и все! Рекомендую разбираться и писать правильно!