Можно ли в Wodpress подключить два обработчика AJAX к одному и тому же файлу js?

Question

[Андрей Александрович]

Можно ли в Wordpress подключить два бэкенд обработчика AJAX к одному и тому же файлу js, в котором будут соответственно разные обработчики?
Или обязательно это должны быть отдельные файлы?

Пробую делать так:

add_action( 'wp_ajax_get_tab_data_action', array( $this, 'get_tab_data_ajax_callback' ) );
add_action( 'wp_ajax_nopriv_get_tab_data_action', array( $this, 'get_tab_data_ajax_callback' ) );

add_action( 'wp_ajax_get_tab_data2_action', array( $this, 'get_tab_data2_ajax_callback' ) );
add_action( 'wp_ajax_nopriv_get_tab_data2_action', array( $this, 'get_tab_data2_ajax_callback' ) );

Подключаю js

static function load_scripts() {
  wp_enqueue_script( 'theme-template-js', KM_THEME_URL. '/assets/js/template.js', array('jquery'), filemtime( KM_THEME_PATH . '/assets/js/template.js' ), true );

  // Localize the script with new data
  $script_data_array1 = array(
    'ajax_url' => admin_url( 'admin-ajax.php' ),
    'security' => wp_create_nonce( 'get_tab_data' ),
  );
  // Localize the script with new data
  $script_data_array2 = array(
    'ajax_url' => admin_url( 'admin-ajax.php' ),
    'security' => wp_create_nonce( 'get_tab_data2' ),
  );
  wp_localize_script( 'trezvost-template-js', 'get_tab_data', $script_data_array1 );
  wp_localize_script( 'theme-template-js', 'get_tab_data2', $script_data_array2 );

  // Enqueued script with localized data.
  wp_enqueue_script( 'theme-template-js' );
}

Callback функции

static function get_tab_data_ajax_callback() {
  check_ajax_referer('get_tab_data', 'security');
....
wp_die();
}

static function get_tab_data_2_ajax_callback() {
  check_ajax_referer('get_tab_data2', 'security');
....
wp_die();
}

В JS файле формирую такие данные для AJAX:

var wp_ajax = {
    action: 'get_tab_data_action',
    url: get_tab_data.ajax_url,
    security: get_tab_data.security
};

var wp_ajax2 = {
    action: 'get_tab_data2_action',
    url: get_tab_data2.ajax_url,
    security: get_tab_data2.security
};

В результате ajax выдает 0.

Возможно ли подключать разные callback ajax функции для обработки в одном файле js?

Answer 1

[Андрей Александрович]

Ответ - да. Размещу пример своего кода, возможно это то, что ты ищешь :)

Обработка ajax запрос'ов у меня лежит в файле wp-content/themes//assets/js/template.js

Ниже выдержка кода из своего плагина для темы. Также можно его адаптировать и для файла functions.php - заменить, например, array( $this, 'load_scripts') на 'load_scripts'

/**
 * РЕГИСТРАЦИЯ ХУКОВ
 */
public function init() {
	add_action( 'wp_enqueue_scripts', array( $this, 'load_scripts'), 20 );

	add_action( 'wp_ajax_get_ajax_1_action', array( $this, 'get_ajax_1_callback' ) );
	add_action( 'wp_ajax_nopriv_get_ajax_1_action', array( $this, 'get_ajax_1_callback' ) );

	add_action( 'wp_ajax_get_ajax_2_action', array( $this, 'get_ajax_2_callback' ) );
	add_action( 'wp_ajax_nopriv_get_ajax_2_action', array( $this, 'get_ajax_2_callback' ) );
}

/**
 * ПОДКЛЮЧЕНИЕ СКРИПТОВ
 *
 * Главный файл скриптов темы смотри в wp-content/themes/<theme-name>/assets/js/template.js
 */
static function load_scripts() {

	$script_data_array_1 = array(
		'ajax_url' => admin_url( 'admin-ajax.php' ),
		'security' => wp_create_nonce( 'get_ajax_1' )
	);
	$script_data_array_2 = array(
		'ajax_url' => admin_url( 'admin-ajax.php' ),
		'security' => wp_create_nonce( 'get_ajax_2' )
	);
        // id скрипта берется из functions.php или внутри плагина - там где впервые подключается этот скрипт.
	wp_localize_script( 'template-js', 'get_ajax_1', $script_data_array_1); 
	wp_localize_script( 'template-js', 'get_ajax_2', $script_data_array_2 ); 
}

/**
 * ОБРАБОТЧИК AJAX ЗАПРОСА 1
 */
static function get_ajax_1_callback() {
	check_ajax_referer('get_ajax_1', 'security');
	$params = isset( $_POST ) ? $_POST : false; // получаем данные из POST запроса
	$data = array(); // здесь храним данные для передачи на фронт
	wp_send_json_success( $data ); // передаем на фронт и через JS обрабатываем данные
	wp_die();
}

/**
 * ОБРАБОТЧИК AJAX ЗАПРОСА 2
 */
static function get_ajax_2_callback() {
	check_ajax_referer('get_ajax_2', 'security');
	$params = isset( $_POST ) ? $_POST : false; // получаем данные из POST запроса
	$data = array(); // здесь храним данные для передачи на фронт
	wp_send_json_success( $data ); // передаем на фронт и через JS обрабатываем данные
	wp_die();
}

Код из template.js с примером AJAX запроса №1

$(document).on("click", '.js-button-1', function (event) {
	event.preventDefault();

	var $btn = $(this),
		post_id = parseInt($btn.data('post-id'), 10),
		post_type = $btn.data('post-type'),
		data = {
			'action': 'get_ajax_1_action',
			'post_type': post_type,
			'post_id': post_id,
			'security': get_ajax_1.security
		};

	$.ajax({
		type: "POST",
		url: get_ajax_1.ajax_url,
		data: data,
		beforeSend: function beforeSend() {
			// здесь превью пока отправляется запрос на сервер
		},
		success: function (response) {
			// про формат и структуру данных в response читать здесь: https://wp-kama.ru/function/wp_send_json_success
			
			if ( response.success ) {
				var data = response.data;
				// обрабатываем полученные из backend'а данные

			} else {
				console.log(response);
			}
		}
	});
});

Код из template.js с примером AJAX запроса №2

$(document).on("click", '.js-button-2', function (event) {
	event.preventDefault();

	var $btn = $(this),
		post_id = parseInt($btn.data('post-id'), 10),
		post_type = $btn.data('post-type'),
		data = {
			'action': 'get_ajax_2_action',
			'post_type': post_type,
			'post_id': post_id,
			'security': get_ajax_2.security
		};

	$.ajax({
		type: "POST",
		url: get_ajax_2.ajax_url,
		data: data,
		beforeSend: function beforeSend() {
			// здесь превью пока отправляется запрос на сервер
		},
		success: function (response) {
			// про формат и структуру данных в response читать здесь: https://wp-kama.ru/function/wp_send_json_success
			
			if ( response.success ) {
				var data = response.data;
				// обрабатываем полученные из backend'а данные

			} else {
				console.log(response);
			}
		}
	});
});