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

  • Vadim Tsukanov
    Разработчик
  • Дата публикации
    26.01.2020
  • Категория
    Wordpress
Правильный AJAX для WORDPRESS
Задача:Отправить ajax запрос нативными средствами Wordpress

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

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

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

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

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

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

add_action( 'wp_ajax_send_mistakes', 'send_mistakes' );
add_action( 'wp_ajax_nopriv_send_mistakes', 'send_mistakes' );

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

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

function send_mistakes ()
{
    //выполняем все,что необходимо;
    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', 'my_ajax_object', array( 'ajax_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:  my_ajax_object.ajax_url,
                type: 'POST',
                dataType: 'html',
                data: $("#mistakes_form").serialize() + '&action=send_mistakes',
                success:function(res){
                    $('#modal_mistakes_content').html('<p>Спасибо! Мы скоро все исправим...</p>');
                    $('#send_mistakes').hide();
                    setTimeout(function() { location.reload() }, 2000);
                }
            })
        }
    });

По сути, из особенностей тут — url: my_ajax_object.ajax_url и &action=send_mistakes

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

Еще нет коммментариев. Будь первым!

Оформить заказ в Devstages