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

AJAX позволяет вам посылать и принимать данные от другого скрипта без перегрузки страницы. Все запросы AJAX, как на стороне клиента, так и на стороне сервера в WordPress отсылаются для обработки в файл wp-admin/admin-ajax.php. Это свойство движка WordPress, которое может вам принести определенные неудобства, если вы не воспользуетесь удобным механизмом работы с AJAX, который вам предоставляет WordPress.

Содержание

  1. Параметры действия
  2. Пример плагина: функция добавления скрипта на страницу
  3. Пример плагина: Кнопка для запуска действия AJAX
  4. Пример плагина: функция обратного вызова для обработчика AJAX
  5. Пример плагина: JavaScript для работы с AJAX
  6. XML формат ответа AJAX
  7. Заключение

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Найти на сайте
Со страниц сайта
Метки
хохмаУмные мыслиармейский юморДела семейныеДокторинформацияой болитфольклорВовочка & kidsВадим ЗверевПолитическиеСтатусы ВКотактеСобрание скороговорокБольшие и малые народностиПро животныхЗаконы МерфиженщиныПро это...Забойный наборНиколай ФоменкоВсякая всякотаалкоманы-наркоголикиВиктор ШендеровичПро услуги и рестораныБородатые анекдотыавтомобилистыТуристы и турыИскусство и киноКозьма ПрутковПро студентовПро работуОмар ХайямЧерномырдинСтатусы про женщин и мужчинВ общественном транспортеПро сумасшедшихСтанислав Ежи ЛецКриминальныеПро ШтирлицаСтас ЯнковскийСмешные статусыДурацкие законыПро юристовпро самолетыПечалькаПро братковХорошие советыНе та ориентацияМарк ТвенСтатусы про жизньНа селеКрасноармейскиеГусары и поручикиДразнилкиИностранные анекдотыСказочныеХрюн МоржовФрансуа де ЛарошфукоЧерный юморЖан-Жак РуссоОхота и рыбалкаПрограммистыЛеди и джентельменыСпортМультяшкиНа бога надейся...БизнесСчиталкиУильям ШекспирГеоргий ФрумкерФрансис БэконШутливая лотереяДикий западПраздникиБедные и богатыеРаневскаяПьер Огюстен Карон де БомаршеСоветы и ответыДикариИсторические анекдотыНикколо МакиавеллиНаполеон БонапартЗагадкиsongswordpresstraditionalpluginпоговоркиC#старостьЧастушкиmysqlbackendjavascripthostingsshajaxphpстатистикапандемия
Больше Меньше
Архивы
Рейтинг@Mail.ru