Chiamate asincrone con Ajax in Wordpress

Ciao! Oggi parliamo di Ajax e WordPress.

Ajax ci permette di eseguire richieste al server senza dover ricaricare la pagina per vedere il risultato. Questo si traduce in una UI più moderna e in una migliore usabilità dei nostri progetti.

La cosa bella è che Ajax è già integrato in WordPress, permettendoci di effettuare chiamate asincrone pubbliche (per tutti) o private (solo utenti loggati), seguendo alcune semplici regole.

Come funziona

Per utilizzare Ajax in WordPress dobbiamo passare attraverso il file:

wp-admin/admin-ajax.php

I parametri fondamentali sono:

url: obbligatorio, punta ad admin-ajax.php
action: obbligatorio, indica quale funzione PHP verrà eseguita
nonce: facoltativo ma consigliato, serve a validare la richiesta

Iniziamo

Creiamo il file JavaScript my-ajax-script.js e lo includiamo nel tema tramite wp_enqueue_script().

functions.php

wp_enqueue_script(
    'my-ajax',
    get_stylesheet_directory_uri() . '/js/my-ajax-script.js',
    array('jquery'),
    '1.0.0',
    true
);

wp_localize_script('my-ajax', 'params', array(
    'ajaxurl' => admin_url('admin-ajax.php'),
    'nonce'   => wp_create_nonce('mynonce')
));

wp_localize_script() permette di passare variabili PHP al JavaScript in modo sicuro.

JavaScript: chiamata Ajax

my-ajax-script.js

$('.myform').submit(function (e) {
    e.preventDefault();

    $.ajax({
        type: 'POST',
        url: params.ajaxurl,
        data: {
            action: 'my_php_action',
            nonce: params.nonce,
            nome: $('input[name="nome"]').val(),
            email: $('input[name="email"]').val(),
            eta: $('input[name="eta"]').val() // esempio: numero
        },
        success: function (resp) {
            console.log(resp);
        },
        error: function (err) {
            console.log(err);
        }
    });
});

Alternativa: serializzare il form

$('form').submit(function (e) {
    e.preventDefault();

    let payload =
        $(this).serialize() +
        '&action=my_php_action' +
        '&nonce=' + params.nonce;

    $.ajax({
        type: 'POST',
        url: params.ajaxurl,
        data: payload,
        success: function (resp) {
            console.log(resp);
        },
        error: function (err) {
            console.log(err);
        }
    });
});

PHP: gestione della richiesta Ajax

functions.php

function my_php_action() {

    // Verifica nonce
    if ( ! wp_verify_nonce($_POST['nonce'], 'mynonce') ) {
        wp_send_json('Non autorizzato', 401);
    }

    // Recupero e sanitizzazione dati
    $nome  = sanitize_text_field($_POST['nome']);
    $email = sanitize_email($_POST['email']);
    $eta   = $_POST['eta']; // ci aspettiamo un numero

    // Validazione aggiuntiva
    if (!is_numeric($eta)) {
        wp_send_json(array(
            'messaggio' => 'Errore: il campo età deve essere un numero',
            'class'     => 'is-error'
        ), 400);
        die();
    }
    $eta = intval($eta);

    // Risposta JSON sicura
    wp_send_json(array(
        'messaggio' => 'Chiamata effettuata con successo',
        'class'     => 'is-success'
    ), 200);
}

// Registrazione delle azioni Ajax
add_action('wp_ajax_my_php_action', 'my_php_action');       // utenti loggati
add_action('wp_ajax_nopriv_my_php_action', 'my_php_action'); // utenti non loggati

Cosa fanno le due add_action:

wp_ajax_my_php_action → la funzione sarà disponibile solo per utenti loggati
wp_ajax_nopriv_my_php_action → la funzione sarà disponibile anche per utenti non loggati
La funzione viene chiamata quando JS invia action='my_php_action'

Conclusioni e best practice

Ajax è uno strumento potentissimo già incluso in WordPress.
Con poche righe di codice possiamo migliorare l’esperienza utente e rendere le interfacce più moderne e reattive.

Suggerimenti aggiuntivi:

Sempre sanitizzare i dati ricevuti (sanitize_text_field(), sanitize_email(), ecc.)
Validare i dati quando ci aspettiamo un tipo specifico (numeri, date, email, valori enumerati)
Escapare l’output quando stampiamo dati in HTML (esc_html(), esc_attr())
Verificare sempre i nonce per sicurezza