AJAX-функции WordPress

Раздел:

| Теги:

| Дата публикации:

Шпаргалка по самым используемым функциям WordPress, когда работаем с AJAX.

Пример регистрации

wp_register_script(
  'handle-script',
  plugin_dir_url(__FILE__) . 'assets/ajax.js',
  [],
  '1.0.0',
  true
);

wp_localize_script(
  'handle-script',
  'ajax_object',
  [
    'ajaxurl' => admin_url('admin-ajax.php'),
    'nonce' => wp_create_nonce('ajax_nonce'),
  ]
);

Регистрация или сразу подключение скрипта:

Самые важные передаваемые параметры:

  • 'ajaxurl' => admin_url('admin-ajax.php') — путь до WordPress обработчика AJAX
  • 'nonce' => wp_create_nonce('ajax_nonce') — создание специального ключа, чтобы предотвратить фальшивые запросы

Пример JS запроса

Нативный JS

// Наши параметры из wp_localize_script()
const nonce = ajax_object.nonce;
const ajaxurl = ajax_object.ajaxurl;

// Формируем передаваемые данные
const formData = new FormData();
formData.append('action', 'my_custom_ajax_query');
formData.append('nonce', nonce);

// Делаем запрос
fetch(ajaxurl, {
  method: 'POST',
  body: formData,
})
  .then(response => response.json())
  .then(response => {
    if (response.success) {
      // Если запрос произошел и он успешный
      console.log(response);
    } else {
      // Если запрос произошел и он неуспешный
      console.error('Error:', response);
    }
  })
  .catch(error => {
    // Если запрос не произошел
    console.error('Error:', error);
  }).finally(() => {
    // Действия после выполнения запроса
  });

JQuery

// Наши параметры из wp_localize_script()
const nonce = ajax_object.nonce;
const ajaxurl = ajax_object.ajaxurl;

// Формируем передаваемые данные
const formData = new FormData();
formData.append('action', 'my_custom_ajax_query');
formData.append('nonce', nonce);

$.ajax({
  url: ajaxurl,
  type: 'POST',
  data: formData,
  processData: false,
  contentType: false,
  success: function(response) {
    if (response.success) {
      // Если запрос произошел и он успешный
      console.log(response);
    } else {
      // Если запрос произошел и он неуспешный
      console.error('Error:', response);
    }
  },
  error: function(error) {
    // Если запрос не произошел
    console.error('Error:', error);
  }
});

Весь код прокомментирован, отмечу:

  • в formData можно передавать какие угодно параметры
  • параметр action очень важен для дальнейшей работы, именно его значение мы будем использовать для обработки запроса

Пример обработки запроса

add_action('wp_ajax_my_custom_ajax_query', 'my_custom_ajax_query_callback');
add_action('wp_ajax_nopriv_my_custom_ajax_query', 'my_custom_ajax_query_callback');

function my_custom_ajax_query_callback() {
  check_ajax_referer('ajax_nonce', 'nonce');

  if ($_POST['action']) {
    wp_send_json_success('test');
  } else {
    wp_send_json_error('error');
  }
}

Обработка AJAX запроса происходит на двух хуках:

  • wp_ajax_{значение параметра action} — обработка для авторизованных пользователей
  • wp_ajax_nopriv_{значение параметра action} — обработка для неавторизованных пользователей

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

В обработчик параметры передаются в глобальной переменной $_POST и для работы используются следующие функции:

  • check_ajax_referer() — проверка передаваемого параметра nonce
  • wp_send_json_success() — отправляем результат при успешной обработке
  • wp_send_json_error() — отправляем результат при неуспешной обработке

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