Статьи

Использование AJAX в WordPress

Январь 8, 2018

В следующем уроке мы узнаем, как использовать AJAX в WordPress для запуска собственных функций. Это работает в WordPress, позволяя вам присоединять ваши собственные действия, к которым вы можете получить доступ из запроса AJAX, чтобы изменить содержимое страницы.

Что такое AJAX?

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

AJAX расшифровывается как асинхронный JavaScript и XML , что позволяет вам делать асинхронные HTTP-запросы к серверу после загрузки страницы. Он будет использовать JavaScript для запроса URL-адреса, позволяющего размещать на сервере дополнительные данные. Выходные данные этого запроса к серверу затем обрабатываются и сохраняются в JavaScript, чтобы вы могли изменить содержимое страницы.

В WordPress AJAX уже встроен в ядро ​​и требует, чтобы вы отправляли эту информацию на определенный URL-адрес в приложении WordPress. Причина, по которой вы не можете использовать какой-либо URL-адрес с WordPress AJAX, заключается в том, что необходимо создать экземпляр WordPress, прежде чем вы сможете получить доступ к данным в База данных WordPress.

AJAX в админке

Если у вас есть опыт использования AJAX, то использовать его в админке WordPress довольно просто. Поскольку AJAX уже встроен в ядро, вы можете просто вернуться к этому.

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

add_action( 'admin_enqueue_scripts', 'add_ajax_javascript_file' );
function add_ajax_javascript_file()
{
    wp_enqueue_script( 'ajax_custom_script', plugin_dir_url( __FILE__ ) . 'ajax-javascript.js', array('jquery') );
}

Это добавит наш файл JavaScript на страницы администратора в области администрирования WordPress, теперь мы можем добавить jQuery, необходимый для отправки запроса ajax.

jQuery(document).ready(function($) 
{
    var data = {
        'action': 'get_post_information',
    'post_id': 120
    };

    $.post(ajaxurl, data, function(response) {
        alert('Server response from the AJAX URL ' + response);
    });
})

Вышеупомянутый JavaScript будет добавлен в наш файл JavaScript и будет использовать jQuery для отправки данных в переменную ajaxurl . Эта переменная является настройкой глобальной переменной WordPress, которая будет публиковать файл admin-ajax.php . Этот файл создает экземпляр WordPress и запускает любые действия по настройке в WordPress.

Данные, которые мы отправляем, являются объектом JavaScript с полями action и post_id. Действие — это код действия WordPress, который мы хотим запустить при отправке этого запроса, остальные данные также публикуются, чтобы мы могли использовать их в коде на стороне сервера.

Теперь нам нужно настроить действие WordPress, которое будет вызываться для этого AJAX-запроса.

<?php 

add_action( 'wp_ajax_get_post_information', 'ajax_get_post_information' );

function ajax_get_post_information() 
{
    if(!empty($_POST['post_id']))
    {
        $post = get_post( $_POST['post_id'] );

        echo json_encode( $post );
    }   

    die();
}

Приведенный выше код должен быть добавлен либо в новый плагин, либо в файл functions.php, чтобы можно было зарегистрировать действие. Нам нужно использовать действие «wp_ajax_ {action}», где {action} определено в файле JavaScript. В функции обратного вызова мы затем получаем опубликованный post_id и ищем сообщение с помощью функции get_post () , затем мы можем отобразить объект JSON данных данных для JavaScript, чтобы подобрать ответ. По ответу AJAX теперь мы можем добавить эту информацию поста в любую часть страницы, которую мы хотим.

AJAX во внешнем интерфейсе

AJAX на веб-интерфейсе вашего сайта немного сложнее, но все же выполнимо, если вы понимаете концепции приведенного выше кода.

Первое, что вам нужно знать, это то, что переменная JavaScript ajaxurl не определена во внешнем интерфейсе, поэтому вам нужно определить этот объект пространства имен при загрузке файла JavaScript с помощью функции wp_localize_script ()

add_action( 'wp_enqueue_scripts', 'add_frontend_ajax_javascript_file' );
function add_frontend_ajax_javascript_file()
{
    wp_localize_script( 'frontend-ajax', 'frontendajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));
    wp_enqueue_script( 'ajax_custom_script', plugin_dir_url( __FILE__ ) . 'ajax-javascript.js', array('jquery') );
}

В административной области есть только одно действие AJAX, для которого вам нужно использовать wp_ajax_ {action} на интерфейсе, вы можете использовать два действия AJAX, wp_ajax_ {action} и wp_ajax_nopriv_ {action}, разница в том, что текущему пользователю не нужно Войдите в систему, чтобы запустить действие AJAX. Поэтому, если пользователь не вошел в систему, он запустит функцию, связанную с wp_ajax_nopriv_, но если пользователь вошел в систему, он запустит функцию, связанную с wp_ajax_

<?php 

add_action( 'wp_ajax_get_post_information', 'ajax_get_post_information' );
add_action( 'wp_ajax_nopriv_get_post_information', 'ajax_get_post_information' );

function ajax_get_post_information() 
{
    if(!empty($_POST['post_id']))
    {
        $post = get_post( $_POST['post_id'] );

        echo json_encode( $post );
    }   

    die();
}

Ошибки AJAX

Если действие AJAX завершается неудачей, оно возвращает одно из двух значений: 0 или -1 .

Если запрашиваемое вами действие не существует, ответ AJAX вернет 0. Чтобы исправить эту ошибку, вам нужно убедиться, что вы правильно определили свое действие wp_ajax_ .

Если запрос не может правильно вызвать URL, он вернется с -1.

 

 

29
Share: