Come WordPress gestisce AJAX

WordPress dispone di un'API specifica per la gestione delle transazioni AJAX. Viene creata una action personalizzata gestita da una funzione (o da un metodo di una classe) che elaborerà i dati e fornirà un output al client JavaScript. Vediamo un esempio pratico.

L'action AJAX viene creata in questo modo:

add_action( 'wp_ajax_nomeazione', 'nomefunzione' );

nomeazione è il nome della nostra azione AJAX personalizzata, mentre nomefunzione è il nome della funzione che gestirà la transazione AJAX.

Per esempio, qualora volessimo creare un form di registrazione in AJAX, il nostro codice potrebbe essere:

function my_custom_register() {
	$username = $_POST['username'];
	$email = $_POST['email'];
	$password = $_POST['password'];
	$role = 'subscriber';
	
	// Qui occorre validare i dati
	
	$output = '';
	$errors = array();
	
	// Validazione
	
	if(count($errors) > 0) {
		$output = implode('', $errors);
	} else {
		wp_insert_user(
			array(
				'user_login' => $username,
				'user_email' => $email,
				'user_pass' => $password,
				'role' => $role
			)
		);
		
		$output = '<a href="' . wp_login_url() . '">Login</a>';
	}
	
	echo $output; // Restituisce l'output al client
	exit(); // Fondamentale!
}

add_action( 'wp_ajax_my_custom_register', 'my_custom_register' );

La gestione è molto semplice: se non ci sono errori viene restituito un link per il login, altrimenti una stringa HTML contenente l'elenco di errori riscontrati durante la validazione.

A questo punto viene il codice lato client che dovrà sempre usare due parametri fissi:

1. L'URL interno al gestore AJAX di WordPress
2. Il parametro action contenente il nome della nostra action (in questo caso my_custom_register).

Esempio:

$('#custom-register').submit(function(e) {
	e.preventDefault();  // necessario
	var $form = $(this);
	var ajaxURL = 'http://' + location.host + '/wp-admin/admin-ajax.php'; // handler AJAX di WordPress
	
	// parametri della richiesta
	var parameters = {
		action: 'my_custom_register',
		username: $('#username', $form).val(),
		email: $('#email', $form).val(),
		password: $('#password', $form).val()
	};
	
	$.ajax({
		url: ajaxURL,
		type: 'POST',
		dataType: 'text',
		data: parameters,
		success: function(response) {
			$('#output', $form).empty();
			$('#output', $form).html(response);
		}
	});
});

Come si può notare, una volta capito il meccanismo tutto risulta abbastanza intuitivo.