Web Factory > WordPress > Как работать с Ajax в WordPress

Как работать с Ajax в WordPress

Если вы опытный разработчик, то скорее всего, вы уже работали с Ajax в WordPress, и знаете как и что нужно использовать, чтобы обмениваться информацией между PHP и JavaScript. Тогда эта статья не расскажет вам ничего нового, она в основном, ориентирована на новичка, который кочет разобраться как работать с Ajax в WordPress.

Как работает Ajax

Как известно, для передачи данных в браузер, чтобы не было перезагрузки страницы, чтобы информация обновилась мгновенно, либо в небольшими задержками, которые можно задавать в JavaScript — необходимо использовать технологию Ajax — это асинхронный JavaScript. Сам код JavaScript делает необходимые вычисления или производит выборку информации со страницы (формы, элементы верстки) и отправляем по Ajax в код php (файл php), который расположен на сервере. Информация обрабатывается в php, обычно, здесь идет работа с базой данных, а результат выполнения отправляется обратно на страницу в код JavaScript.

Сам же JavaScript выводит при помощи своих средств или библиотек фреймворков, таких как jQuery, данные на страницу. Причем можно применять разные эффекты, который доступны в JavaScript. Технология Ajax делает страницы интерактивными, что удобно, когда не нужно ждать результата после перегрузки страницы.

Есть еще большой плюс использования Ajax — запрос передается скрипту php в фоне, то есть он не будет тормозить сайт, если нужно получить большой результат вычислений. Сайт будет работать быстро, как ни в чем не бывало, пока сервер будет пыхтеть, обрабатывая запрос, после чего отдаст результат, а JavaScript готовый результат отобразит.

Используем Ajax в WordPress

Чтобы работать в WordPress с Ajax — запросы нужно отправлять на специальный файл, который их обрабатывает, он называется:

admin-ajax.php

Нам нужно зарегистрировать скрипт JavaScript с переменной, в которой будет храниться путь к этому файлу, чтобы на него передавать запросы.

add_action( 'wp_enqueue_scripts', 'myajax_data', 99 );
function myajax_data(){
    // Первый параметр 'tutor-script-id' означает, что код будет прикреплен к скрипту с ID 'tutor-script-id'
    // то есть это означает, что наша переменная будет доступна в этом скрипте и мы к ней сможем обратиться по имени
    // этот код можно вставить в functions.php но только после того, как подключится скрипт с DI tutor-script-id
    wp_localize_script('tutor-script-id', 'ajax_user', 
	array(
	    'url' => admin_url('admin-ajax.php')
	)
    );  
}

Обработчик PHP

Когда у нас готова переменная с адресом скрипта, ан который отправляются запросы, нам нужно сформировать функцию, которая будет обрабатывать запросы. Ее можно здесь же в functions.php разместить:

// Пишем в function.php
// Этот хук работает для авторизованных пользователей
add_action( 'wp_ajax_my_action', 'my_action' );
// Этот хук сработает для не авторизованных пользователей
// Пишем именно 2 хука, чтобы обрабатывать всех пользователей
add_action( 'wp_ajax_nopriv_my_action', 'my_action' );
 
function my_action() {
    echo 'функция, которая обрабатывает запрос и отдает результат';
    // здесь ловим наши переменные из массива POST в данном случае,
    // $_POST['$data'];
    // Этот массив будет содержать ключи action, user_name, user_email, которые мы передали
    // чтобы сделать отправку ответа обратно в JavaScript нужно выполнить echo $some_result 
}
 
// обязательно указание одинаковых слов my_action

JavaScript код, отдает и принимает информацию

После того, как мы подготовили функцию для обработки запроса — создадим непосредственно тот скрипт в JS, который будет отдавать нам данные и принимать ответ, затем выводить на страницу:

var contact_form = function () {
 
    $( '.button-submit' ).removeAttr( 'onclick' );
 
    // При нажатии на кнопку, отправим информацию в php и выведем полученный ответ на старницу
    $( '.button-submit' ).bind( 'click', function( e ){
        e.preventDefault();
 
        // Получаем данные
        var user_name = $( '#wdform_2_element2' ).val();
        var user_email = $( '#wdform_4_element2' ).val();
 
        // Формируем массив данных для отправки по Ajax
        var data = {
            'action': 'my_action',
            'user_name' : user_name,
            'user_email' : user_email,
        };
 
        // Отправляем данные в php
        $.ajax({
            type: "post",
            url: ajax_user.url, // эта наша переменная, которую мы определили, на этот файл отправится запрос
            data: data,
            // При положительном ответе - выводим на страницу (в нашем случае в консоль)
            success: function( msg ){
                console.log( msg );
            }
        });
 
    } );
 
};

Вот и все, мы поработали с Ajax в WordPress, не так уж и сложно, главное, понять как это работает.

 


Опубликовано:

Оставить комментарий

avatar
  Подписаться  
Уведомление о