Использование AJAX в плагинах WordPress
AJAX позволяет вам посылать и принимать данные от другого скрипта без перегрузки страницы. Все запросы AJAX, как на стороне клиента, так и на стороне сервера в WordPress отсылаются для обработки в файл wp-admin/admin-ajax.php. Это свойство движка WordPress, которое может вам принести определенные неудобства, если вы не воспользуетесь удобным механизмом работы с AJAX, который вам предоставляет WordPress.
Содержание
- Параметры действия
- Пример плагина: функция добавления скрипта на страницу
- Пример плагина: Кнопка для запуска действия AJAX
- Пример плагина: функция обратного вызова для обработчика AJAX
- Пример плагина: JavaScript для работы с AJAX
- XML формат ответа AJAX
- Заключение
1.Параметры действия
Параметры действия являются данными, которые скрипт JQuery отправляет на сервер и получает ответ. Например:
var data { action: 'k3towp_plugin_do_ajax_reqгest', var1: 'value1', var2: 'value2' }
Параметр k3towp_plugin_do_ajax_reqoest’ отвечает за связь между PHP и JavaScript и должен быть уникальным. Остальные параметры создаются в соответствии с вашими требованиями. Существуют два отдельных действия для AJAX: wp_ajax_$action, который обрабатывает действия пользователя вошедшего в систему и wp_ajax_nopriv_$action для незарегистрированного непривилегированного пользователя:
add_action('wp_ajax_k3towp_plugin_do_ajax_request'); add_action('wp_ajax_nopriv_k3towp_plugin_do_ajax_request');
Такой код позволяет связать обработку запроса AJAX в глубинах WordPress wp-admin/admin-ajax.php с вызовом обратной функции k3towp_plugin_do_ajax_request. Рассмотрим макетный фрагмент плагина, осуществляющего работу с AJAX.
2.Пример плагина: функция добавления скрипта на страницу
В этой функции мы проверяем права пользователя и, если все в порядке, то регистрируем JavaScript, расположенный в папке нашего плагина js/ajax-transfer-items.js . Затем публикуем переменную var k3towp_params , которая содержит действующий протокол и URL, так как все запросы должны соответствовать политики AJAX, то есть иметь одно происхождение.
//добавляем скрипт на странице настроек плагина если пользователь имеет права function k3towp_add_js_plugun_settings_page() { //если нет прав if(!current_user_can('manage_options')) return; //получить url плагина $path = plugin_dir_url(__FILE__); //добавляем скрипт в очередь обработки wp_enqueue_script('k3towp-ajax-transfer-items',$path.'js/ajax-transfer-items.js', array('jquery'),'1.0.0',true); //получаем протокол страницы $protocol = isset($_SERVER['HTTPS']) ? 'https://' : 'http://'; //получаем параметр ajaxurl который будет выводиться перед файлом ajax-transfer-items.js $params = array ( //получаем url файла admin-ajax.php 'ajaxurl' => admin_url('admin-ajax.php', $protocol) ); //добавляет дополнительные данные перед указанным скриптом, который должен быть в очереди на вывод wp_localize_script('k3towp-ajax-transfer-items', 'k3towp_params', $params); //перед опубликованным скриптом будут динамические перемнные для использования в ajax-transfer-items.js //var k3towp_params = {"ajaxurl":"http:\/\/localhost\/wordpress\/wp-admin\/admin-ajax.php"}; // }
3.Пример плагина: Кнопка для запуска действия AJAX
На странице настроек плагина добавим кнопку для запуска действия и выводим нашу функцию k3towp_add_js_plugun_settings_page() для длобавления JavaScript на страницу:
<h3><?php _e('K3 to wp action','k3towp-plugin')?></h3> <?php // Создание nonce для этого действия $nonce = wp_create_nonce( 'k3towp-nonce');?> <p class="submit"> <label for="btna"><?php _e('Do base transfer','k3towp-plugin')?></label> <input type="button" class="button-primary" value="<?php _e("Do action", 'k3towp-plugin')?>" id="k3towp" data-nonce="<?php echo $nonce?>"> </p> </div> <?php //добаляем скрипт если пользователь имеет права k3towp_add_js_plugun_settings_page();
4.Пример плагина: функция обратного вызова для обработчика AJAX
Прикрепим функцию обратного вызова на указанный хук для обработки запроса AJAX:
// Обработчик Ajax add_action( 'wp_ajax_k3towp_plugin_do_ajax_request', 'k3towp_plugin_do_ajax_request' ); function k3towp_plugin_do_ajax_request() { // Подтверждение WP_Ajax_Response $response = new WP_Ajax_Response; // на всякий случай проверяем права доступа и верфецируем nonce if( current_user_can( 'manage_options' ) && // Верификация Nonces wp_verify_nonce( $_REQUEST['nonce'], 'k3towp-nonce' )) { //делаем необходимую обработку запроса, выполняем операции в данными и базами, // обращаемся к функциям WordPress // имеем некий массив результатов для отправки назад $results = do_neccesary_action(); // Формирование ответа, если все прошло без ошибок $response->add( array( 'data' => 'success', 'supplemental' => $results ) ); } else { // Формирование ответа, если возникли ошибки $response->add( array( 'data' => 'error', 'supplemental' => $results ) ); } // В любом случае отправляем ответ $response->send(); // Всегда выходим, когда Ajax выполнен exit(); }
Заметим, что всю необходимую работу выполняет объект WP_Ajax_Response. Функция, которая делает всю нашу работу и возвращает необходимые данные может выглядеть так:
//делаем необходимую обработку запроса, выполняем операции в данными и базами, // обращаемся к функцим WordPress // имеем некий массив результатов для отправки назад function do_neccesary_action() { return array('number'=> 10, 'counter' => 100,'message' => 'Items were converted into posts'); }
5.Пример плагина: JavaScript для работы с AJAX
И наконец, JavaScript, который отрабатывает событие нажатия на кнопку на странице, отсылает и обрабатывает AJAX запрос-ответ, расположенный в отдельном файле js/ajax-transfer-items.js, выглядит так:
jQuery(document).ready (function() { jQuery('#k3towp').click(function (e){ var button = this; var nonce = jQuery('#k3towp').attr('data-nonce'); //удаляем предыдущее сообщение о результатах (если есть) if(jQuery('.mesk3towp')) jQuery('.mesk3towp').remove(); // Это то, что мы отправляем на сервер var data = { action: 'k3towp_plugin_do_ajax_request', nonce: nonce } // Изменяем текст на кнопке // Чтобы предоставить пользователю некоторую немедленную информацию jQuery( button ).attr('value', 'Actions...' ); // Отправляем на сервер и получаем ответ jQuery.post( k3towp_params.ajaxurl, data, function( data ) { // Разбираем XML-ответ с помощью jQuery // Получаем статус var status = jQuery( data ).find( 'response_data' ).text(); // Получаем сообщение var message = jQuery( data ).find( 'supplemental message' ).text(); //чтобы посмотреть XML-ответ //var n = new XMLSerializer(); alert(n.serializeToString(data)); // Если все прошло без сбоев, выводим сообщение об этом и удаляем ссылку if( status == 'success' ) { //возвращаем надпись для кнопки jQuery( button ).attr('value', 'Do action' ); //выводим сообщения о результатах операции jQuery( button ).after( '<p class="mesk3towp"><strong>' + message + '</strong></p>'); jQuery( button ).blur(); } else if(message){ // Если возникла ошибка, выводим сообщение об ошибке alert( message ); }else{ //если не было ответа AJAX alert( 'no response' ); } }); // Блокируем поведение по умолчанию e.preventDefault(); }); });
6.XML формат ответа AJAX
Данные, которые посылаются через AJAX имеют формат XML. В предыдущем скрипте используется один из возможных методов извлечения данных из запроса XML формата:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <wp_ajax> <response action="k3towp_plugin_do_ajax_request_0"> <object id="0" position="1"> <response_data> <![CDATA[success]]> </response_data> <supplemental> <number> <![CDATA[10]]> </number> <counter> <![CDATA[100]]> </counter> <message> <![CDATA[Items were converted into posts]]> </message> </supplemental> </object> </response> </wp_ajax>
7.Заключение
В данной небольшой статье был рассмотрен пример для работы с AJAX на странице настроек плагина в WordPress. Вы можете ипользовать этот пример для страницы настроек виджета, темы или для работы во fronend. Рад, если был полезен. Готов оказать помощь.
admin@allrecall.ru
Добавить комментарий