Wordpress AJAX на чистом Javascript

Ранее я уже писал про то как в wordpress можно динамически выводить записи и страницы в модальном окне. Вот ссылка. Там я использовал jQuery для работы с AJAX. Но не всегда есть возможность использовать какие-то библиотеки. Сейчас я пишу плагин и в нём я сделал фильтр записей в зависимости от заданных произвольных полей. Дело в том, что плагином могут использоваться в десятках темах и подключение лишних скриптов не хорошо для оптимизации сайта, особенно сейчас, когда в моду вошли различные JS-фрэймворки, а в wordpress-е до сих пор стоит jQuery очень старой версии.

Старт

Сначало я предлагаю создать вам событие на странице. На этой странице будет выводиться весь контент, который связан с работой с AJAX. Допустим пусть будет так:

//
do_action('our_page_whith_ajax');

Ну конечно же это стоит делать в новом шаблоне страницы. После того как вы создали новый шаблон и в нём создали событие перейдите в файл functions.php в вашей теме.

В functions.php

Регистрация скрипта нам будет нужна по двум причинам:

1. Нужно напичатать служебный скрипт wordpress’а после нашего скрипта.
2. Мы не хотим, чтобы наш скрипт подключался на других страницач и по-этому мы вызовем его подключение по собыитию.

И так. сам код:

//
function our_page_whith_ajax_script(){

    wp_register_script('our_page_whith_ajax_js', get_template_directory_uri() . 'assets/js/front.js', array('jquery'), '1.0', true);
    // Не забудьте создать assets/js/front.js
    // Можно тут зарегистрировать стили для нашеё страницы

}
add_action( 'wp_enqueue_scripts', 'our_page_whith_ajax_script' );

Отсюда нам нужно запомнить наш handler our_page_whith_ajax_js. Если вам нужна помощь по использованию данной функции вы можете перейти в мою статью о правильном подключении JS и CSS в WordPress.

2. Добавим действие к хуку

В начале мы объявили на нашей странице do_action(‘our_page_whith_ajax’) к по которому у нас и будет вызываться «всякое» для AJAX-са. Теперь мы добавим функцию, которая будет за всё это отвечать.

//
functions our_page_whith_ajax(){

    // Далее наш код будет тут

}
add_action('our_page_whith_ajax', 'our_page_whith_ajax');

Давайте сразу добавим вызов нашего скрипта и объявим несколько функций.

//
function our_page_whith_ajax(){

    // Подключение скриптов
    wp_enqueue_script('our_page_whith_ajax_js');

    // Напечатаем кнопку которая будет отправлять наш запрос
    do_action('our_page_button');

    // Напечатаем блок в котором будет выводиться наш ajax контент
    do_action('our_page_response_box');

    // Напечатаем наш скрипт с ajax
    add_action('wp_footer', 'our_page_js_in_footer');
}
add_action('our_page_whith_ajax', 'our_page_whith_ajax');
add_action( 'wp_enqueue_scripts', 'our_page_localize_script', 99 );

Обращу внимание на add_action(‘wp_footer’, ‘our_page_js_in_footer’). Наш ajax-скрипт можно создать и в том js-файле который мы подключили, но в моём деле мне содержание моего js зависело от php и я его там изменял, да и так сложнее и интереснее.

3. Объявим наши функции и хуки

function our_page_button(){
    echo '<button data-type="our-btn">Нажать</button>';
}
add_action('our_page_button', 'our_page_button');

function our_page_response_box(){
    echo '<div data-type="our-resposnse-box"';
}
add_action('our_page_response_box', 'our_page_response_box');

function our_page_localize_script(){

    // our_page_whith_ajax_js - тот самы хэндрег о котором я говорил
    // Запомним admin_url
    wp_localize_script('our_page_whith_ajax_js', 'admin_url',
            array(
                'url' => admin_url('admin-ajax.php')
            )
        );

}

function our_page_js_in_footer(){

    ?>

    <script type="text/javascript" >

        // Получаем нашу кнопку
        var btn = document.querySelector('[data-type="our-btn"]');

        function OUR_submitListener(event){

            //На всякий случай убираем дефолтные действия
            event.preventDefault();

            //Объявим объект который будем передавать, просто для примера

            var data = new Object();

            // Наполним его данными

            data.explF = 'data';
            data.explT = 'data2';

            // Преобразуем в строку

            data = JSON.stringify(data);

            // Далее то что касается отправки запроса на сервер

            var xhttp = new XMLHttpRequest();

            xhttp.onreadystatechange = function () {
                    if(this.readyState == 4 && this.status == 200){

                    // В блок с data-type="our-resposnse-box" вернём полученный HTML

                        document.querySelector('[data-type="our-resposnse-box"]').innerHTML = this.responseText;

                    }
                };

            // Тут наш admin_url и тут же прописан action который будет вызываться в php   
            xhttp.open('POST', admin_url.url + "?action=our_action", true);

            xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

            // Отправляем наши данные
            xhttp.send("data="+data);

        }

        // Ждём клик
        btn.addEventListener('click', OUR_submitListener, btn); 

    </script>

    <?php

}

В этой строке xhttp.open(‘POST’, admin_url.url + «?action=our_action», true); мы прописали action по которому будет вызван наша php функция. Давайте добавим её и привяжем к событию обработки ajax в вордпресе.

function our_page_whith_ajax_response(){

    // Получим то что пришло к нам
    $arr = json_decode(stripslashes($_POST['data']), true);

    //и просто распечатаем

    echo '<pre>';
    print_r($arr);
    echo '</pre>';

    // Прекратим процесс
    wp_die();
}

// Обратите внимание где мы использовали our_action
add_action('wp_ajax_our_action', 'our_page_whith_ajax_response');
add_action('wp_ajax_nopriv_our_action', 'our_page_whith_ajax_response');

В итоге на странице вы получиет такую запись:

Array

(

[explF] => data

[explT] => data2

)

P.S. 

Если у вас возникли сложности то напишите мне в вк, ссылка в подвале сайта. Пользуйтесь моими сервисами, используйте stickjaw для быстрого изменения пропорций блога. Пока!)