В предыдущей статье мы рассмотрели основы работы с AJAX в WordPress и использование AJAX в админпанели. В этой статье мы рассмотрим работу с AJAX на стороне сайта.
В процессе рассмотрения мы будем во многом опираться на материалы предыдущей статьи и статьи посвящённой виджетам WordPress. Поэтому если вы не читали предыдущую статью или незнакомы с технологией виджетов, настоятельно рекомендуется прочесть эти статьи (ссылки также продублированы в конце). Просто иначе вам вероятно будет сложно понять изложенное ниже.
Использование AJAX на сайте имеет две особенности:
- На стороне фронтэнда в WordPress не определена JavaScript переменная ajaxurl;
- AJAX запрос в зависимости от решаемой задачи может быть отправлен зарегистрированным пользователем после входа на сайт (для админпанели другие варианты исключены), незарегистрированным пользователем или допускается и то и другое одновременно.
Исходя из этого и строится работа с AJAX в плагине.
Сама по себе обработка запроса, поступившего с клиентской части, и регистрация обработчиков ничем не отличается от того, что было рассмотрено нами ранее. Однако следует учесть, что хук WordPress «wp_ajax_nopriv_actionname» разрешает отправку запроса только для незарегистрированных пользователей сайта. То есть, если пользователь выполнит процедуру входа и после этого попытается отправить запрос, для которого установлен только этот хук, у него ничего не получится, а в консоли браузера можно будет увидеть ошибку 400 «Bad request».
Поэтому, если вам нужно чтобы запрос работал для всех пользователей, необходимо добавить хук «wp_ajax_actionname», который мы использовали ранее для админпанели.
Также в силу того, что на стороне сайте на определена переменная ajaxurl, адрес системного обработчика AJAX запросов необходимо получить самостоятельно.
1 |
var ajaxurl ="https://wptest/wp-admin/admin-ajax.php"; |
Вместо https://wptest необходимо указать домен вашего сайта.
Также есть возможность получить адрес обработчика динамически, что более предпочтительно, т.к. домен со временем может измениться.
1 |
var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>"; |
Далее приведён пример простейшего плагина, использующего AJAX. Пояснения в коде минимальны, т.к. все соответствующие вопросы уже разобраны в этой и предыдущих статьях.
Главный файл плагина:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<?php define('PLUGIN_DIR', plugin_dir_path(__FILE__)); include 'AtWidget.php'; class AjaxTest { private $textRes; public function AjaxTest() {} public function add_ajax_action() { // Разрешаем отпралять запрос незарегистрированным пользователям. add_action('wp_ajax_nopriv_testajaxaction', array( &$this, 'test_ajax_action' )); // Разрешаем отпралять запрос зарегистрированным пользователям после выполнения процедуры входа. add_action('wp_ajax_testajaxaction', array( &$this, 'test_ajax_action' )); } public function test_ajax_action() { echo "It's working!"; // Чтобы в вывод функции обработчика не попало ничего лишнего. wp_die(); } public function test_ajax_widget_registration() { add_action("widgets_init", function () { register_widget("AtWidget"); }); } } $instance = new AjaxTest(); $instance->add_ajax_action(); $instance->test_ajax_widget_registration(); ?> |
Виджет плагина:
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php class AtWidget extends WP_Widget { public function __construct() { parent::__construct("at_widget", "Тестовый виджет для Ajax на сайте", array( “description” => "Тестовый виджет для Ajax на сайте" )); } public function widget($args, $instance) { $title = $instance[“title”]; ?> |
1 2 3 |
<?php } } ?> |
Работа плагина:
Источники
Добавить комментарий