WordPress как на ладони
Недорогой хостинг для сайтов на WordPress: wordpress.jino.ru Шаблоны сайтов на русском

Ajax в WordPress

Цель этой статьи показать, как использовать AJAX при создании тем и плагинов.

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

AJAX Simply - мой плагин для удобного создания AJAX запросов. Использовать AJAX станет проще в несколько раз!

Видео уроки об AJAX в WordPress:

AJAX в админ-панели WordPress

С тех пор, как AJAX был встроен в админ-панель WP, использовать функционал AJAX в плагинах стало очень удобно. Небольшой пример. Все делается в одном файле (файле плагина или файле темы functions.php).

#1. Добавляем javascript

Сначала добавляем на страницу админки javascript код, который будет посылать AJAX запрос.

<?php
//add_action('admin_print_scripts', 'my_action_javascript'); // такое подключение будет работать не всегда
add_action('admin_print_footer_scripts', 'my_action_javascript', 99);
function my_action_javascript() {
	?>
	<script>
	jQuery(document).ready(function($) {
		var data = {
			action: 'my_action',
			whatever: 1234
		};

		// с версии 2.8 'ajaxurl' всегда определен в админке
		jQuery.post( ajaxurl, data, function(response) {
			alert('Получено с сервера: ' + response);
		});
	});
	</script>
	<?php
}
?>

С версии 2.8 javascript переменная ajaxurl определена глобально на всех страницах админки. Используйте её в js коде, как ссылку на файл обработчик AJAX запроса. Обычно это файл /wp-admin/admin-ajax.php. В теме (шаблоне) эта переменная не определена. Чтобы использовать её во фронт-энде, её нужно определить самостоятельно. Как это сделать смотрите ниже.

#2. Создаем PHP функцию

Теперь, создадим PHP функцию, которая будет обрабатывать переданный AJAX запрос. Для этого добавляем следующий код в functions.php (можно в плагин):

add_action( 'wp_ajax_my_action', 'my_action_callback' );
function my_action_callback() {
	$whatever = intval( $_POST['whatever'] );

	$whatever += 10;
	echo $whatever;

	wp_die(); // выход нужен для того, чтобы в ответе не было ничего лишнего, только то что возвращает функция
}

Тут мы цепляемся на хук wp_ajax_my_action - это динамический хук и выглядит он так: wp_ajax_(action), где вместо (action) вставляется значение переменной передаваемой в первом коде: action = my_action.

Вот и все.

Примера выше достаточно, чтобы начать использовать AJAX в админ-панели WordPress.

По возможности всегда используйте wp_die() вместо die() или exit(), в функции обработки AJAX запроса. Так вы добьетесь лучшей интеграции с WordPress и в случае ошибок в коде, получите данные о них.

меню

AJAX во внешней части WordPress

Первое в чем нужно убедиться - установлена ли на сайте библиотека jQuery.

Во фронт-энде (внешней части сайта) нужно использовать еще один хук для обработки AJAX запросов: wp_ajax_nopriv_(action). Этот хук в отличии от wp_ajax_(action), срабатывает для неавторизованных пользователей.

Т.е. чтобы создать обработчик запроса для всех пользователей: авторизованных и нет, PHP функцию нужно прикреплять сразу к двум хукам:

add_action('wp_ajax_(action)', 'my_action_callback');
add_action('wp_ajax_nopriv_(action)', 'my_action_callback');

'wp_ajax_nopriv_(action)' можно не указывать, если не нужно, чтобы AJAX запрос обрабатывался для неавторизованных пользователей.

Переменная ajaxurl

Напомню, что переменная ajaxurl есть только в админке и её нет в лицевой части сайта (фронт-энде), поэтому её нужно определить (создать). Но мы назовем её по-другому - myajax.url, для фронта так удобнее, потому что так в объект myajax можно будет добавить еще данные связанные с AJAX запросом.

Правильный способ создать такую переменную - это использовать функцию wp_localize_script().

// Подключаем локализацию в самом конце подключаемых к выводу скриптов, чтобы скрипт
// 'twentyfifteen-script', к которому мы подключаемся, точно был добавлен в очередь на вывод.
// Заметка: код можно вставить в любое место functions.php темы
add_action( 'wp_enqueue_scripts', 'myajax_data', 99 );
function myajax_data(){

	// Первый параметр 'twentyfifteen-script' означает, что код будет прикреплен к скрипту с ID 'twentyfifteen-script'
	// 'twentyfifteen-script' должен быть добавлен в очередь на вывод, иначе WP не поймет куда вставлять код локализации
	// Заметка: обычно этот код нужно добавлять в functions.php в том месте где подключаются скрипты, после указанного скрипта
	wp_localize_script( 'twentyfifteen-script', 'myajax', 
		array(
			'url' => admin_url('admin-ajax.php')
		)
	);  

}

В результате, получим в head части сайта прямо перед скриптом 'twentyfifteen-script':

<script type='text/javascript'>
/* <![CDATA[ */
var myajax = {"url":"http://wptest.ru/wp-admin/admin-ajax.php"};
/* ]]> */
</script>
<script type='text/javascript' src='http://wptest.ru/wp-content/themes/twentyfifteen/js/functions.js?ver=20150330'></script>

На этом теория AJAX закончена, теперь все как для админ части, только вместо ajaxurl указываем myajax.url и нужно прикрепить функцию обработчик на еще один хук wp_ajax_nopriv_(action).

Пример AJAX кода для фронт энда

<?php

add_action( 'wp_enqueue_scripts', 'myajax_data', 99 );
function myajax_data(){

	wp_localize_script('twentyfifteen-script', 'myajax', 
		array(
			'url' => admin_url('admin-ajax.php')
		)
	);  

}

add_action('wp_footer', 'my_action_javascript', 99); // для фронта
function my_action_javascript() {
	?>
	<script type="text/javascript" >
	jQuery(document).ready(function($) {
		var data = {
			action: 'my_action',
			whatever: 1234
		};

		// 'ajaxurl' не определена во фронте, поэтому мы добавили её аналог с помощью wp_localize_script()
		jQuery.post( myajax.url, data, function(response) {
			alert('Получено с сервера: ' + response);
		});
	});
	</script>
	<?php
}

add_action('wp_ajax_my_action', 'my_action_callback');
add_action('wp_ajax_nopriv_my_action', 'my_action_callback');
function my_action_callback() {
	$whatever = intval( $_POST['whatever'] );

	echo $whatever + 10;

	// выход нужен для того, чтобы в ответе не было ничего лишнего, только то что возвращает функция
	wp_die();
}

Код рассчитан на тему twentyfifteen. Вставлять код можно в functions.php темы.

Этот код будет работать для любой темы, единственное что для этого нужно - это поменять название основного скрипта темы twentyfifteen-script, который подключается после jquery.

меню

Логичное подключение AJAX хуков

Я не стал усложнять чтение и не говорил, как правильно подключать AJAX через хуки в коде. Впрочем все что написано ниже не обязательно, потому что работать будет и так, но это рекомендуется.

Функции обработчики установленные хукам:

  • wp_ajax_(action)
  • wp_ajax_nopriv_(action) 

Оба хука всегда удовлетворяют условию wp_doing_ajax():

if( wp_doing_ajax() ){}

// до версии WP 4.7 
if( defined('DOING_AJAX') ){}

А значит сами хуки нужно подключать, только если срабатывает это условие.

Используя это правило, можно не подключать хуки там где в этом нет смысла. Например, при генерации страницы шаблона или страницы админки. Эта маленькая деталь добавит больше логики в код и в некоторых случаях может избавить от багов.

Пример того, как рекомендуется подключать все AJAX хуки.

// подключаем AJAX обработчики, только когда в этом есть смысл
if( wp_doing_ajax() ){
	add_action('wp_ajax_myaction', 'ajax_handler');
	add_action('wp_ajax_nopriv_myaction', 'ajax_handler');
}

// или так до WP 4.7
if( defined('DOING_AJAX') ){
	add_action('wp_ajax_myaction', 'ajax_handler');
	add_action('wp_ajax_nopriv_myaction', 'ajax_handler');
}

В этом случае хуки будут подключены только во время AJAX запроса и не будут подключены при простом посещении фронта, админки, REST или CRON запросе.

Напомню также, что данные отправляемые с фронтэнда на файл wp-admin/admin-ajax.php обработаются указанной в хуке произвольной функцией ajax_handler(), независимо авторизован пользователь или нет.

меню

Защита: используем nonce и проверяем права

Нет острой необходимости проверять AJAX запрос, если он потенциально не опасный. Например, когда он просто получает какие-то данные. Но когда запрос удаляет или обновляет данные, то его просто необходимо дополнительно защитить с помощью nonce кода и проверкой прав доступа.

Разработчики часто ленятся ставить такую защиту, получая самый неожиданный результат. Недобросовестные пользователи могут каким-либо образом заставить юзера с правами сделать то что им нужно и в итоге навредить сайту над которым вы работали долгие месяцы, годы.

Существует два вида защиты, которые нужно использовать в AJAX запросах в большинстве случаев.

1. Код nonce (случайный код)

Nonce - это уникальная строка, которая создается и используется один раз - одноразовое число. Nonce проверка используется, когда нужно убедится, что запрос был послан с указанного «места».

В WordPress есть функции wp_create_nonce() и check_ajax_referer() - это базовые функции для создания и последующей проверки nonce кода. С их помощью мы и будем создавать защиту nonce для AJAX запросов.

Для начала создадим nonce код:

add_action( 'wp_enqueue_scripts', 'myajax_data', 99 );
function myajax_data(){

	wp_localize_script('twentyfifteen-script', 'myajax', 
		array(
			'url' => admin_url('admin-ajax.php'),
			'nonce' => wp_create_nonce('myajax-nonce')
		)
	);  

}

twentyfifteen-script это название основного скрипта темы (см. выше), который подключается на сайте с помощью wp_enqueue_script().

Затем, в AJAX запросе добавим переменную с кодом nonce:

var ajaxdata = {
	action     : 'myajax-submit',
	nonce_code : myajax.nonce
};
jQuery.post( myajax.url, ajaxdata, function( response ) {
	alert( response );
});

Теперь, в обработке заброса необходимо проверить nonce код:

add_action( 'wp_ajax_nopriv_myajax-submit', 'myajax_submit' );
add_action( 'wp_ajax_myajax-submit', 'myajax_submit' );
function myajax_submit(){
	// проверяем nonce код, если проверка не пройдена прерываем обработку
	check_ajax_referer( 'myajax-nonce', 'nonce_code' );
	// или так
	if( ! wp_verify_nonce( $_POST['nonce_code'], 'myajax-nonce' ) ) die( 'Stop!');

	// обрабатываем данные и возвращаем
	echo 'Возвращаемые данные';

	// не забываем завершать PHP
	wp_die();
}

check_ajax_referer() работает на основе функции wp_verify_nonce() и по сути является её оберткой для AJAX запросов.

Обратите внимание, что в данном случае Nonce код создается в HTML коде. А это значит, что если у вас установлен плагин страничного кэширования, то этот код может и наверняка будет устаревать к моменту очередного AJAX запроса, потому что HTML код кэшируется...

2. Проверка прав доступа

Тут AJAX запросы будут срабатывать только для пользователей с правом указанным правом, например author. Для всех остальных, включая неавторизованных пользователей, AJAX запрос вернет ошибку.

Особенность тут в том, что не авторизованные пользователи тоже должны видеть сообщение об ошибке при AJAX запросе. Поэтому для них тоже нужно обрабатывать запрос и вернуть сообщение об ошибке:

add_action( 'wp_ajax_nopriv_myajax-submit', 'myajax_submit' );
add_action( 'wp_ajax_myajax-submit', 'myajax_submit' );
function myajax_submit(){
	// проверяем nonce код, если проверка не пройдена прерываем обработку
	check_ajax_referer( 'myajax-nonce', 'nonce_code' );

	// текущий пользователь не имеет права автора или выше
	if( ! current_user_can('publish_posts') )
		die('Этот запрос доступен пользователям с правом автора или выше.')

	// ОК. У юзера есть нужные права!

	// Делаем что нужно и выводим данные на экран, чтобы вернуть их скрипту

	// Не забываем выходить
	wp_die();
}
меню

Включаем кэширование для AJAX запросов

По умолчанию все AJAX запросы НЕ кэшируются браузером для этого PHP устанавливает специальные заголовки функцией nocache_headers().

Чаще всего AJAX запросы кэшировать и не надо, потому что они должны возвращать свежие данные, но бывают случаи когда такое кэширование может сэкономить ресурсы и увеличить скорость работы скрипта. Например, если у нас есть сложный фильтр товаров который юзеры используют постоянно. Тут было бы разумно кэшировать все результаты фильтра например на пару часов, все равно товары не добавляются с такой скоростью...

Как включить кэширование для указанных AJAX запросов смотрите во втором примере функции nocache_headers().

меню

Отлавливаем баги, PHP ошибки

Проблемы могут возникнуть при AJAX запросе и появлении ошибок PHP. Заметки или сообщения могут изменить возвращаемый результат или вызвать ошибку javascript.

Дебаг (вывод ошибок на экран)

Вариант:

Как правило запросы отправляются с браузера в файл. Поэтому чтобы увидеть результат запроса, ошибку или что-либо еще, можно открыть панель разработчика, выбрать именно наш запрос среди многих и посмотреть что он вернул.

При этом в коде можно использовать привычные функции print_r() или var_dump(), чтобы увидеть что находится в нужных переменных.

Вариант: включаем показ ошибок в AJAX запросах

WordPress по умолчанию не показывает ошибки для AJAX запросов даже если константа WP_DEBUG включена! Видно это в коде функции wp_debug_mode().

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

Чтобы включить показ ошибок при AJAX запроса, нужно вставить такой код в файл темы functions.php или в плагин. Но лучшее его вставить как можно раньше, чтобы видеть ранние ошибки, лучше всего в MU плагины...

if( WP_DEBUG && WP_DEBUG_DISPLAY && (defined('DOING_AJAX') && DOING_AJAX) ){
	@ ini_set( 'display_errors', 1 );
}

Вариант: вывод данных в лог файл

Если по ходу написания кода нужно заглянуть в переменную $myvar, то еще можно использовать такой код в обработчике ajax запроса:

error_log( print_r($myvar, true) );

В результате, в файл логов сервера (error.log) будет записано содержимое переменной $myvar. Так можно выполнить ajax, и заглянуть в лог.

Вариант: вывод PHP ошибок в лог файл

Чтобы выводить PHP заметки и ошибки в лог файл, нужно включить константу WP_DEBUG_LOG. Такой лог файл появится в папке wp-content.

Вариант:

Если не получается увидеть сообщение об ошибке и нужно работать в режиме разработчика, можно очистить буфер сразу перед возвратом данных:

ob_clean();
echo $whatever;
die();

После этого нужно посмотреть что возвращает запрос через дебаг браузера или как-то еще...

Вариант:

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

Ошибка при возвращении данных

Если AJAX запрос на в файл wp-admin/admin-ajax.php провалился, то будет возвращен ответ -1 или 0.

  • -1 - ошибка при проверке запроса. См. функцию check_ajax_referer()
  • 0 - обработка запроса вернула пустой результат
  • 0 - также возвращается по умолчанию во всех остальных случаях.

Полезная стать по теме (англ): 5 TIPS FOR USING AJAX IN WORDPRESS

меню

Плагины

Плагин AJAX Simply - добавляет класс, с помощью которого можно удобно и быстро писать AJAX запросы на стороне клиента и ответы на стороне сервера.

Качественный и надежный сервис по продвижению в Телеграмме предлагает совершить недорогую покупку подписчиков в группу. На сайте Вы найдете массу выгодных предложений с индивидуальными условиями для каждого сообщества. Например, Вы можете выбрать оптимальную скорость поступления ресурса, которая доходит до 1000 единиц в сутки. Успейте сделать заказ, пока на сайте действуют оптовые скидки.

91 коммент
Полезные 10 Вопросы 2 Все
  • Олег

    Здравствуйте. Ваш пример работает, если обработчик лежит в теме в function.php (это со стороны сайта если запрос делать). Я пишу свой плагин. Как сделать, чтобы код находился в плагине, и при этом возвращалось для аякса

    4
    Ответить4.2 года назад #
    • Сергей cайт: specialist-studio.ru

      вот функция которой задается размер вордпресса и pattern, например

      function print_attachments( $pattern, $size) {
      $a = array(
      'post_type' => 'attachment',
      'numberposts' => -1,
      'post_status' => null,
      'post_parent' => get_the_ID()
      );
      
      $attr = array();
      $ret = '';
      $attachments = get_posts( $a );
      if ( $attachments ) {
      foreach ( $attachments as $attachment ) { 
      $attr = wp_get_attachment_image_src( $attachment->ID, $size );
      $ret .= str_replace('src=""', 'src="'.$attr[0].'"', $pattern);
      }
      }
      }
      Ответить3.7 года назад #
    • Сергей cайт: specialist-studio.ru

      для аякса добавьте тоже самое только сделайте хук с подключением функций аякса для файла /wp-admin/wp-ajax.php и в функции хука используйте ваши функции

      Ответить3.7 года назад #
    • Kama7364

      Вешайте нужные функции на хуки и они будут срабатывать во время аякса.

      add_action('wp_ajax_my_action', 'my_action_callback');
      add_action('wp_ajax_nopriv_my_action', 'my_action_callback');

      До события init: вставляйте прямо в код плагина, или в функции которые подключаются до события init, например при plugins_loaded.

      Ответить3.7 года назад #
  • При использовании примера в виджете он создает код со вторым обработчиком jQuery(document).ready() который не срабатывает (первый добавляется самим ВП). Хук надо вешать на добавление JS к коду первого вызова jQuery(document).ready. Не разбирался, мне не надо, но всё равно, "Как правильно"?

    --
    Еще другой вопрос. Сделал так:

    <script type="text/javascript" >
    function update_click() {
    	jQuery.post(ajaxurl, {action: 'update_db'}, function(response) { alert('Response is: ' + response); });
    }
    </script>

    Заменил колбэк на:

    function my_action_callback() {
    		echo "ajax response";
    		wp_die();
    	}

    Регистрирую хук:

    add_action('wp_ajax_my_action', 'my_action_callback');

    но всегда получаю 0, callback не вызывается. Что не так? Как /wp-admin/admin-ajax.php определяет какой колбэк вызывать?

    Добавил: да, аякс не вызывается. Точнее "POST http://---.org/wp-admin/admin-ajax.php" есть, а функция коллбэк не отрабатывает.

    Ответить4 года назад #
  • Радик

    Спасибо.

    -1
    Ответить4 года назад #
  • @ Виталий

    Доброго времени суток! Уважаемые Знатоки, подскажите неопытному, пожалуйста, от хостера получил такое письмо: идет большое количество таких запросов "POST /wp-admin/admin-ajax.php HTTP/1.1"
    пишут либо брут форс, либо где-то ошибка
    что сильно нагружает админку т.е. можно даже и не попасть в админскую часть сайта
    Сайт работает с buddypress, bbpress
    Пробовал закрывать, его с помощью .htaccess файл, при попадании не авторизованного пользователя на страницу с записью вылазит окно с авторизацией что совсем не айс!
    Подскажите можно ли как-то ограничить доступ к этому файлу не авторизованным пользователям, при сохранении функционала сайта? Может редирект с него или еще что-нибудь!?

    Ответить4 года назад #
    • Kama7364

      Закрывать доступ этому файлу очень не рекомендуется, он важен. Смотрите логи, узнайте кто отправляет больше всего запросов, после того как разберетесь с нарушителем (а это может быть и плагин), нужно подумать как ограничить доступ. Если это внешние запросы, то может по IP или сделать блокировку типа такой (3 запроса в пол часа).

      1
      Ответить4 года назад #
      • @ Виталий

        Спасибо за быстрый ответ! А как разобраться внешний или внутренний? "POST /wp-cron.php?.... вот это я так понимаю внутренний и там ип адрес сайта, есть мой ип при обращении к admin-ajax.php но в основном левые IP

        1
        Ответить4 года назад #
  • Andrey

    Заметил, что wp_localize_script последним аргументом свободно усваивает и строку smile

    Ответить3.2 года назад #
  • Максим

    Здравствуйте. Подскажите как сделать так, чтобы работал ваш плагин WP Smile на сайте с ajax. Я использую вот этот шаблон, и при переходе на страницу, плагин не подгружается. Он работает только если обновить страницу. Большое спасибо за ответ.

    Ответить3.1 года назад #
    • Kama7364

      В описании плагина есть пункт "Ручная вставка блока смайликов в форму комментирования", пробовали его?

      <?php echo kama_sm_get_smiles_code( 'id_формы_комментирования' ); ?>
      Ответить3.1 года назад #
  • Помогите разобраться, хочу с помощью Аякс вывести заголовок текущего поста внутри записи, а также подгружать несколько произвольных полей.
    Вот мой Аякс

            $('h5').click(function(){       
    		$.ajax({
    			type: "POST",
    			data: {             
    				action: 'wfm_action',               
    			},
    			url: wfmFavorites.url,
    			success: function(res){
    				//alert(res);
    
    				var j = $("#archi");
    				j.html(res);
    			},
    			error: function(){
    				alert('Error!');
    			}
    		});
    		return false;
    	});

    Вот созданная функция, которая должна сработать при клике, но ничего не происходит

    function wfm_ajax_check() { 
    
    echo '<li>' . get_the_title() . '</li>';
    
    }
    Ответить3 года назад #
    • campusboy3279 cайт: www.youtube.com/c/wpplus

      Ваша функция не знает, для какой записи заголовок выводить. Нужно ей ID записи передать.

      Ответить3 года назад #
  • Приветствую! Подскажите как реализовать кросс доменный запрос?

    Ответить3 года назад #
  • Если включена обязательная авторизация пользователей, по сути, nonce можно заменить current_user_can?

    Ответить2.8 года назад #
  • avense5 cайт: videovegas.ru

    Что может быть не так подключаю скрипт, после wp_localize_script, url передается все ОК, но вот в response не возвращается никаких значений, просто пустое всплывающее сообщение...? Хорошо бы если бы сделали небольшой пристенький пример для подключения ajax во внешней части сайта.

    Ответить2.7 года назад #
    • campusboy3279 cайт: www.youtube.com/c/wpplus

      К примеру, в functions.php:

      // После вывода jquery определим переменную url (путь до admin-ajax.php), актуально для незарегистрированных пользователей
      wp_localize_script( 'jquery', 'myajax', 
      array(
         'url' => admin_url('admin-ajax.php'), // обращаться к переменной в JS коде как myajax.url
         'nonce' => wp_create_nonce('myajax-nonce') // обращаться к переменной в JS коде как myajax.nonce, в скобках ключ (любое на латинице)
      ));
      
      add_action('wp_ajax_name_action', 'my_action_callback');
      add_action('wp_ajax_nopriv_name_action', 'my_action_callback'); // Для незарегистрированных пользователей
      function myajax_submit() {
      	$nonce = $_POST['nonce'];
      
      	// проверяем nonce код, если проверка не пройдена прерываем обработку
      	if ( !wp_verify_nonce( $nonce, 'myajax-nonce' ) ) // в кавычках ключ, что использовали при создании в wp_create_nonce
      		die ( 'Stop!')
      
      	// обрабатываем данные и возвращаем
       echo 'Hello, avense!';
      
      	// Не забываем выходить
      	exit;
      }

      В самом JS скрипте:

      jQuery.post(
      	myajax.url,
      	{
      	action : 'name_action',
      	// отправим код nonce вместе с остальными данными
      	nonce : myajax.nonce
      	},
      	function( response ) {
      		alert( response );
      	}
      );
      1
      Ответить2.7 года назад #
      • avense5 cайт: videovegas.ru

        Добавляю все по инструкции в functions.php
        Этот код вообще ничего не делает:

        // После вывода jquery определим переменную url (путь до admin-ajax.php), актуально для незарегистрированных пользователей
        wp_localize_script( 'jquery', 'myajax', 
        array(
           'url' => admin_url('admin-ajax.php'), // обращаться к переменной в JS коде как myajax.url
           'nonce' => wp_create_nonce('myajax-nonce') // обращаться к переменной в JS коде как myajax.nonce, в скобках ключ (любое на латинице)
        ));

        И кстати там у вас в коде после die ( 'Stop!') нужен знак ";", иначе вызывает ошибку, если бы вы пробовали этот код на работоспособность то заметили эту ошибку.
        Если подключаю таким вариантом:

        function enqueue_ajax_request() {
        	wp_enqueue_script( 'sc-ajax-request', get_template_directory_uri() . '/js/test.js', array( 'jquery' ) );
        	wp_localize_script( 'sc-ajax-request', 'myajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ), 'nonce' => wp_create_nonce('myajax-nonce') ) );
        }
        add_action( 'wp_enqueue_scripts', 'enqueue_ajax_request' );

        то url в переменную прописывается, но вот ответа response от этих поставленных функций нет никакого:

        add_action( 'wp_ajax_nopriv_myajax-submit', 'myajax_submit' );
        add_action( 'wp_ajax_myajax-submit', 'myajax_submit' );
        function myajax_submit() {
        	$nonce = $_POST['nonce'];
        
        	// проверяем nonce код, если проверка не пройдена прерываем обработку
        	if ( !wp_verify_nonce( $nonce, 'myajax-nonce' ) )
        		die ( 'Stop!');
        
        	// обрабатываем данные и возвращаем
        	wp_die('OK :)');
        
        	// Не забываем выходить
        	exit;
        }

        Нашел еще вот два примера, завтра еще буду тестировать.
        https://byronyasgur.wordpress.com/2011/06/27/frontend-forward-facing-ajax-in-wordpress
        https://benmarshall.me/wordpress-ajax-frontend-backend

        Ответить2.7 года назад #
        • Kama7364

          Этот код вообще ничего не делает:

          Заметку по jquery прочитайте тут: wp_localize_script()

          Сейчас пройдусь по статье, протестирую коды все, потом отпишусь...

          Обновление:

          Раздел 1: AJAX в админ-панели WordPress

          Вставил 2 кода из раздела. В результате, AJAX сработал в админке - все как и написано все.

          Раздел 2: AJAX во внешней части WordPress

          Да по статье действительно не очень понятно, что и как делать для фронта!

          Вот проверенный код для AJAX во фронте, для темы twentyfifteen добавлю его в статью:

          // подключаем локализацию в самом конце подключаемых к выводу скриптов,
          // чтобы скрипт 'twentyfifteen-script', к которому мы подключаемся, точно был добавлен в очередь на вывод.
          // Заметка: обычно этот код нужно добавлять в functions.php в том месте где подключаются скрипты, после указанного скрипта
          add_action( 'wp_enqueue_scripts', 'myajax_data', 99 );
          function myajax_data(){
          	// Первый параметр 'twentyfifteen-script' означает, что код будет прикреплен к скрипту с ID 'twentyfifteen-script'
          	// 'twentyfifteen-script' должен быть добавлен в очередь на вывод, иначе WP не поймет куда вставлять код локализации
          	wp_localize_script('twentyfifteen-script', 'myajax', 
          		array(
          			'url' => admin_url('admin-ajax.php')
          		)
          	);  
          
          }
          
          // add_action('admin_print_scripts', 'my_action_javascript'); // такое подключение будет работать не всегда
          // add_action('admin_print_footer_scripts', 'my_action_javascript', 99); // для админки
          add_action('wp_footer', 'my_action_javascript', 99); // для фронта
          function my_action_javascript() {
          	?>
          	<script type="text/javascript" >
          	jQuery(document).ready(function($) {
          		var data = {
          			action: 'my_action',
          			whatever: 1234
          		};
          
          		// 'ajaxurl' не определена во фронте, поэтому мы добавили её аналог с помощью wp_localize_script()
          		jQuery.post( myajax.url, data, function(response) {
          			alert('Получено с сервера: ' + response);
          		});
          	});
          	</script>
          	<?php
          }
          
          add_action('wp_ajax_my_action', 'my_action_callback');
          add_action('wp_ajax_nopriv_my_action', 'my_action_callback');
          function my_action_callback() {
          	$whatever = intval( $_POST['whatever'] );
          
          	echo $whatever + 10;
          
          	// выход нужен для того, чтобы в ответе не было ничего лишнего, только то что возвращает функция
          	wp_die();
          }

          П.С. Дополнил описание статьи, спасибо за ваши комментарии!

          1
          Ответить2.7 года назад #
          • avense5 cайт: videovegas.ru

            Благодарю за подробный пример!
            Поставил, но в ответе все равно только: "Получено с сервера:"
            Не могу понять в чем дело, позже попробую поставить на чистый сайт без всяких скриптов и плагинов. Отпишусь позже.

            UPD:
            Поставил на чистый сайт на тему twentyfifteen, все отлично работает!
            Выходит что то у меня на сайте в плагинах или теме. Позже поищу и отпишусь в чем была причина.

            Ответить2.7 года назад #
          • avense5 cайт: videovegas.ru

            Нашел причину почему никакие данные по ajax не возвращались.
            Дело было в одном из подключаемых в тему скриптов

            require_once( 'exemple-script.php' );

            Там был код отлавливающий ajax запрос:

            if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
            	// Это ajax запрос
            	exit;
            }

            Я собирался перенести этот код в отдельный php файл, но решил попробовать использовать ajax, во внешней части сайта, средствами WordPress.
            Так этот кусок кода там времмено был и видимо отлавливал ajax запрос возвращая exit;

            За подробный пример еще раз спасибо.
            Можете добавить к своему примеру еще закомментированный вариант подключения своего скрипта, что бы было все понятно:

            wp_enqueue_script( 'my-ajax-script', get_template_directory_uri() . '/js/exemple.js', array( 'jquery' ) );
            wp_localize_script( 'my-ajax-script', 'the_ajax_script', array( 'url' => admin_url( 'admin-ajax.php' ) ) );
            Ответить2.7 года назад #
Здравствуйте, !     Войти . Зарегистрироваться