Примеры быстрого подключения  AJAX функционала в WordPress, используя встроенную библиотеку jQuery

Технология AJAX широко используется практически на всех интернет сайтах.  Не исключением есть и CMS движок – WordPress. В нём  интегрирован весь необходимый функционал для работы с AJAX функциями и сам принцип их подключения не сильно отличается от классического аякса.

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

Пример № 1

Первый пример это классический вариант простой функции, которая посылает число аяксом (без перезагрузки) на сервер, там оно увеличивается на 6 и вставляет ответ  в блок DIV.

Важно помнить, что  если мы хотим использовать встроенные в WordPress библиотеки jQuery,  то вместо привычного знака – “$” мы пишем слово “jQuery”.

wordpress-jquery-ajax

Первым  делом нужно написать сам модуль JavaScript и поместить его в Фронтэнд для вызова и получения результатов.

Для работы нашего модуля, берём встроенную в jQuery функцию – jQuery.post() ,где ajax_url  – это путь к ВП jQuery ‘/wp-admin/admin-ajax.php’, а data – это переменная JSON, которая передает на сервер два значения.

«my_action» – зарегистрированная функция, которая увеличивает и возвращает наше число. «myPOST»– это POST переменная,  в которой передаётся наше число, и собственно сама кнопка «button», с  привязанной к ней анонимной функцией $(‘#buton_AJAX’).click()

Этот кусочек кода я добавил в файл сайт бара – sidebar.php

Далее регистрируем нашу функцию, которая будет работать только для авторизованных пользователей в фронтэнд:

add_action( ‘wp_ajax_my_action’, ‘my_action_callback’ )

Функция только для не авторизованных пользователей в фронтэнде:

add_action( ‘wp_ajax_nopriv_my_action’, ‘my_action_callback’ )

Сама функция получает пост – myPOST увеличивает на 6 и возвращает результат. В качестве сервера у нас будет файл со всеми функциями темы – function.php. Туда мы и добавим нашу функцию.

Результатом вышеперечисленного видим, что при нажатии на кнопку заданное значение увеличивается на число 6.

Пример №2.

В другом примере мы используем аякс в административной панели, где добавляем экшен. В экшен ставим задачу, что нужно внести нашу функцию get_my_ajax_posts’, в основное меню. А затем уже добавляем наше меню функцией add_menu_page – add_action(‘admin_menu’, ‘get_my_ajax_posts’)

function get_my_ajax_posts()
{
add_menu_page(‘Поиск поста’, ‘Поиск поста’, 8, ‘get_my_posts’, ‘get_my_posts’);
}

 В следующей функции get_my_posts() я разворачиваю обе части AJAX.

add_action(‘admin_print_footer_scripts’, ‘my_action_javascript’, 99) – этот экшен добавляет нашу функцию в админ часть.

Для наглядности примера в обработчике нашего запроса, я добавил несколько функций – поиска поста по ид, и теперь при вводе цифры в поисковое поле с id “search_post”, выводится заголовок поста, если он есть в базе или же сообщение что ничего не найдено.

Итак собираем в переменную data JSON c  экшененом, который будет обрабатывать запрос …_my_action2, и вторым параметром передаём цифру ид искомого поста:

var data = { action: ‘my_action2’, search_post: $(‘#search_post’).val() }
Как и в пред идущем примере я беру функцию jQuery.post()

jQuery.post( ajaxurl, data, function(response2){….}) и  вернувшийся результат в переменной response2 я вставляю в блок дива.

Пример № 3.

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

Регистрируем наш JavaScripit c функцией wp_create_nonce()

Далее регистрируем нашу функцию wp_ajax_myajax-… и можно wp_ajax_nopriv_myajax-…которая в случае пройденной верификации выводит переданные данные, сообщая нам об этом.

Эту часть кода мы добавляем в фронтэнд, как и в двух предыдущих примерах и используем функцию .post(), но теперь в передаваемые данные ещё добавляем и myajax.nonce который добавляет строку шифрованного кода.

1 Бал2 Бала3  Бала4  Бала5  Балов
loadingЗагрузка...

<<< >>>

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