Créer une requête Ajax avec WordPress • Formation WordPress Capitaine WP

Ajax permet de lancer une requête asynchrone afin de contacter le serveur sans pour autant recharger la page, pour des pages web plus dynamiques. On va voir dans ce cours comment créer des requêtes Ajax avec WordPress en toute simplicité.

Sommaire du cours

C’est quoi l’Ajax ?
Quelles possibilités avec Ajax dans WordPress ?
#1 • HTML : Préparer le formulaire pour Ajax
1. Alternative
#2 • Javascript : Préparer la requête Ajax
#3 . PHP : Réceptionner et traiter la requête Ajax en PHP
#4 : JS • Réceptionner les données
1. Afficher les données dans la page
Bug • Comment trouver le problème ?
1. Si vous avez une erreur 400 « bad request »
Sécurité : des requêtes vraiment robustes !

C’est quoi l’Ajax ?

Pour faire simple, Ajax nous permet d’aller chercher des informations sur le serveur sans pour autant recharger toute la page. Voici une définition plus complète :

Ajax est le nom de la technologie permettant au navigateur de lancer une requête au serveur en temps réel pour lire ou écrire des données sans recharger la page. Ajax est également appelé XHR pour XML HTTP Request, même si on utilise en général le JSON. On parle de requêtes asynchrones car elles ne bloquent pas l’exécution du script pendant que les données transitent vers le serveur. Ajax permet un web beaucoup plus dynamique, et des économies de ressources serveur.

Par exemple, les « Load more » que l’on retrouve en bas de page utilisent Ajax pour charger automatiquement les articles suivants lorsque l’internaute arrive à la fin de la liste.

Dans ce cours, on va charger de manière asynchrone les commentaires d’un article, afin de ne pas trop alourdir le chargement initial de la page. Voici un schéma pour bien comprendre ce qu’il se passe lors d’une requête.

Tout commence par un internaute qui demande à afficher une page. Le serveur l’envoie, et le navigateur l’interprète. Jusque là, on est sur un fonctionnement classique.

Schéma client/serveur. Le serveur envoie une page HTML — 1. Le serveur envoie une nouvelle page à l’internaute

Ensuite, l’internaute clique sur le bouton “Charger les commentaires”. Javascript va alors lancer une requête Ajax au serveur.

Schéma client/serveur. Le client, via JS, envoie une requête Ajax au serveur. — 2. Javascript envoie une requête Ajax au serveur

Le serveur va exécuter une fonction spécialement destinée à traiter cette requête, et va récupérer les données, générer le HTML correspondant pour le renvoyer enfin au client.

Schéma client/serveur. Le serveur renvoie juste le nouveau HTML, pas toute la page. — 3. Le serveur récupère les informations et les transmet au client

Côté client, Javascript récupère ce contenu, et va l’injecter dans la page. Les commentaires apparaissent à l’écran.

Schéma client/serveur. Enfin, Javascript injecte le HTML obtenu dans la page. — 4. Le client, via JS, récupère ces informations, et les injecte dans la page

Et voilà ! On a ainsi évité de nombreuses requêtes et allégé la charge du serveur. On va maintenant voir comment le faire concrètement.

Quelles possibilités avec Ajax dans WordPress ?

Grâce à WordPress, la manière de gérer une requête Ajax est plutôt simple, et nous permettra de nombreuses utilisations comme par exemple :

Afficher les commentaires lors d’un clic ;
Afficher la définition d’un mot lorsqu’on le survole ;
Lancer une recherche dynamique ;
Afficher les prochains articles en bas de page (load more) ;
…

Conseil

Et à chaque fois, le but c’est de faire l’action SANS recharger la page.

Dans la formation développeur d’extensions, on verra même comment utiliser Ajax dans l’interface d’administration pour enregistrer nos paramètres en temps réel.

Dans ce cours on va se concentrer sur l’affichage des commentaires. Mais une fois que vous aurez compris le principe d’Ajax, vous pourrez utiliser la même logique pour faire tout ce que vous voulez !

#1 • HTML : Préparer le formulaire pour Ajax

On va commencer par préparer le markup de notre page. On va devoir envoyer des informations via Javascript à notre serveur, comme notamment l’identifiant de l’article dans lequel on veut récupérer les commentaires.

Et pour cela, on va utiliser un formulaire classique. La différence, c’est que le formulaire ne s’enverra pas, afin d’éviter le rechargement de la page : c’est JS qui va s’en occuper, en Ajax.

PHP

single.php

<h2>Il y a <?php comments_number(); ?></h2>

<?php if( get_comments_number() ): ?>
        
    <form 
        action="<?php echo admin_url( 'admin-ajax.php' ); ?>" 
        method="post" 
        class="js-load-comments"
    >
        <input 
            type="hidden" 
            name="postid" 
            value="<?php echo get_the_ID(); ?>"
        >
        <input 
            type="hidden" 
            name="nonce" 
            value="<?php echo wp_create_nonce( 'capitaine_load_comments' ); ?>"
        > 
        <!– ou : wp_nonce_field( 'capitaine_load_comments' ); –>
        <input
            type="hidden"
            name="action"   
            value="capitaine_load_comments"
        >

        <button class="comments-load-button">Charger les commentaires</button>
    </form>

    <ol class="comments">
        <!– les commentaires apparaitront ici –>
    </ol>

<?php endif; ?>

Dans l’action de la balise <form>, on va indiquer l’URL qui réceptionne les requêtes Ajax dans WordPress. Et elle est disponible via la fonction admin_url().

Ne vous inquiétez pas : même si c’est une adresse de l’administration WordPress, elle est tout de même joignable par un utilisateur du site, en toute sécurité.

Ensuite on a besoin de passer plusieurs informations :

postid : L’identifiant de l’article pour lequel on veut récupérer les commentaires. Celui qu’on consulte en somme ;
nonce : c’est un jeton de sécurité, pour s’assurer que la requête provient bien de ce site, et pas d’un autre. On évite ainsi les attaques XSS. On en reparle à la fin du cours, dans la section dédiée à la sécurité ;
action : cela permet d’indiquer à WordPress quelle fonction on va lancer en PHP, grâce à un système de hook qu’on va étudier juste après.

Enfin, la liste avec la classe comments réceptionnera le HTML généré par le serveur, afin d’afficher nos commentaires.

Alternative

Si vous préférez, vous pouvez passer toutes les données grâce aux attributs data- HTML 5, et utiliser un simple bouton au lieu d’un formulaire :

PHP

<button
	class="js-load-comments"
    data-postid="<?php echo get_the_ID(); ?>"
    data-nonce="<?php echo wp_create_nonce('capitaine_load_comments'); ?>"
    data-action="capitaine_load_comments"
    data-ajaxurl="<?php echo admin_url( 'admin-ajax.php' ); ?>"
>

Au final on se retrouve avec un HTML beaucoup plus léger. À vous de voir !

#2 • Javascript : Préparer la requête Ajax

Une requête Ajax, comme on l’a vu, c’est du JS qui communique avec du PHP. Pour permettre cela, on va préparer le terrain :

Créer le fichier JS

Tout d’abord, il va nous falloir un fichier Javascript que je vais créer dans js/script.js.

js/script.js

(function ($) {
  $(document).ready(function () {

    // Tout le code ira ici

  });
})(jQuery);

Ce que je fais dedans, c’est de l’encapsulation, ça permet d’isoler notre code afin d’éviter les conflits avec les autres scripts, et d’utiliser le $ de jQuery. C’est une bonne pratique que je vous conseille d’appliquer à tous vos fichier JS.

Conseil

Vous pouvez bien évidemment vous passer de jQuery. Vous pourriez tout aussi bien utiliser du JS natif (vanilla). jQuery nous apporte pas grand chose ici, à part simplifier la récupération de nos données.

Charger le script

On va ensuite charger notre script, comme on l’a appris dans le cours « charger les scripts et styles ». Et ça va se passer dans le fichier functions.php de notre thème :

PHP

functions.php

<?php
function capitaine_assets() {

  	// …

  	// Charger notre script
	wp_enqueue_script( 
      	'capitaine', 
      	get_template_directory_uri() . '/js/script.js', [ 'jquery' ], 
    	'1.0', 
    	true 
 	);
}
add_action( 'wp_enqueue_scripts', 'capitaine_assets' );

D’ailleurs si vous souhaitez charger votre script uniquement dans les pages single du blog, vous pourriez ajouter un conditional tag :

PHP

functions.php

<?php
function capitaine_assets() {

  	// …

  	// Charger un script spécifique aux articles du blog
	if( is_single() ) {
    	wp_enqueue_script( 
      		'capitaine_comments', 
      		get_template_directory_uri() . '/js/comments.js', [ 'jquery' ], 
    		'1.0', 
    		true 
 		);
    }
}
add_action( 'wp_enqueue_scripts', 'capitaine_assets' );

Ça va dépendre de si vous faites un script pour tout votre site, ce qui est judicieux lorsqu’il y a peu de JS, ou si vous préférez faire un script par fonctionnalité.

Référez-vous au cours sur le Template Hierarchy si vous n’êtes pas à l’aise avec les différents modèles de pages utilisés par WordPress.

On va maintenant écrire notre première requête, grâce à la fonction fetch de Javascript, qui permet de lancer des requêtes Ajax en toute simplicité.

Dans ce premier exemple on va dire que les commentaires ne sont pas affichés automatiquement au chargement de la page. À la place, un bouton bleu permettra au clic de les charger dynamiquement :

Les commentaires d'un article — Le bouton bleu va permettre de charger les commentaires

Et voici le code à insérer dans notre JS. Il parait un peu long, mais ne vous inquiétez pas, tout va vous paraitre très vite très clair :

js/script.js

(function ($) {
    $(document).ready(function () {

        // Chargment des commentaires en Ajax
        $('.js-load-comments').submit(function (e) {

            // Empêcher l'envoi classique du formulaire
            e.preventDefault();

            // L'URL qui réceptionne les requêtes Ajax dans l'attribut "action" de <form>
            const ajaxurl = $(this).attr('action');

            // Les données de notre formulaire
			// ⚠️ Ne changez pas le nom "action" !
            const data = {
                action: $(this).find('input[name=action]').val(), 
                nonce:  $(this).find('input[name=nonce]').val(),
                postid: $(this).find('input[name=postid]').val(),
            }

            // Pour vérifier qu'on a bien récupéré les données
            console.log(ajaxurl);
            console.log(data);

            // Requête Ajax en JS natif via Fetch
            fetch(ajaxurl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'Cache-Control': 'no-cache',
                },
                body: new URLSearchParams(data),
            })
            .then(response => response.json())
            .then(response => {
                console.log(response);

                // En cas d'erreur
                if (!response.success) {
                    alert(response.data);
                    return;
                }

                // Et en cas de réussite
                $(this).hide(); // Cacher le formulaire
                $('.comments').html(response.data); // Et afficher le HTML
            });
        });
        
    });
})(jQuery);

Tout d’abord, on pose un événement sur la soumission du formulaire avec submit. On enchaine directement avec un e.preventDefault() pour empêcher l’envoi de la requête, sinon la page va se recharger. Après tout c’est le fonctionnement par défaut d’un formulaire.

Ensuite, on récupère l’URL de WordPress qui permet de traiter les requêtes Ajax. On a placé cette information dans l’attribut action de la balise <form> en html.

PHP

<form action="<?php echo admin_url( 'admin-ajax.php' ); ?>" >

Puis on va récupérer toutes les données qu’on va devoir envoyer au serveur, à savoir l’action (obligatoire), le nonce (pour la sécurité) et, dans notre exemple, l’identifiant de l’article en cours.

const data = {
	action: $(this).find('input[name=action]').val(), 
	nonce:  $(this).find('input[name=nonce]').val(),
	postid: $(this).find('input[name=postid]').val(),
}

Pour cela on va lire la valeur des champs qui se trouvent dans notre formulaire, référencé par this, via les méthodes find et val.

Avant d’aller plus loin, essayez un console.log() pour vérifier que vous récupérez bien les données !

Aparté: La librairie wp.ajax

Il existe une librairie wp.ajax qui propose des fonctions pour faire de l’Ajax, et qui nous évite d’avoir à récupérer l’URL de traitement Ajax. Mais j’ai décidé de ne pas l’utiliser dans ce cours afin de privilégier la méthode fetch. Après tout cette dernière est native en JS et simple à utiliser.

On évite ainsi de charger un autre script qui n’apporte au final que peu d’intérêt. Malgré tout, rien ne vous empêche de l’utiliser si vous préférez cette approche.

Alternative : si vous avez utilisé les data- attributes

Du coup si vous avez opté pour le simple bouton à la place du formulaire, il y aura quelques changements à faire dans le script. Tout d’abord ce ne sera plus l’événement submit, mais click cette fois !

$('.js-load-comments').click(function (e) {

Et pour récupérer les données en data, plutôt qu’en champs, il faudra utiliser la fonction .data(). Dans cet exemple, this fait désormais référence au bouton :

const ajaxurl = $(this).data('ajaxurl');

const data = {
    action: $(this).data('action'), 
    nonce:  $(this).data('nonce'),
    postid: $(this).data('postid'),
}

Vérifiez que vous récupérez bien les données à l’aide d’un petit console.log().

La requête Ajax avec fetch

Et enfin, c’est le moment de lancer notre requête Ajax, via la méthode fetch de Javacript. Cette méthode est compatible avec tous les navigateurs depuis 2017. Vous pouvez donc l’utiliser sans souci.

fetch(ajaxurl, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Cache-Control': 'no-cache',
    },
    body: new URLSearchParams(data),
})
.then(response => response.json())
.then(response => {

Le premier paramètre, c’est l’URL à joindre, celle qu’on a récupéré dans l’action du formulaire.

Ensuite, il y a un objet contenant :

La méthode qui sera toujours POST (car on envoie des informations au serveur) ;
Les en-têtes sont également toujours les mêmes ;
Et le corps qui contient les données à envoyer, qu’on passe dans la fonction URLSearchParams pour les mettre en forme correctement dans la requête.

Conseil

Ce bout de code sera toujours le même dans toutes vos requêtes Ajax. Il n’y aura pas besoin de le modifier : il marche tout le temps.

La suite, dans then, sera lancé uniquement quand le serveur aura répondu : on entre bien dans un fonctionnement asynchrone. Pendant ce temps là, le reste du code JS peut continuer de tourner sans problème, et sans blocage.

Pour le moment, on va passer du côté serveur, et donc sur du PHP, pour réceptionner et traiter la requête.

#3 . PHP : Réceptionner et traiter la requête Ajax en PHP

C’est dans functions.php que va se dérouler la suite lorsqu’on code un thème. Pour traiter la requête, on va passer par un hook dédié à cet effet.

PHP

functions.php

<?php
add_action( 'wp_ajax_capitaine_load_comments', 'capitaine_load_comments' );
add_action( 'wp_ajax_nopriv_capitaine_load_comments', 'capitaine_load_comments' );

function capitaine_load_comments() {
  
	// Vérification de sécurité
  	if( 
		! isset( $_REQUEST['nonce'] ) or 
       	! wp_verify_nonce( $_REQUEST['nonce'], 'capitaine_load_comments' ) 
    ) {
    	wp_send_json_error( "Vous n’avez pas l’autorisation d’effectuer cette action.", 403 );
  	}
    
    // On vérifie que l'identifiant a bien été envoyé
    if( ! isset( $_POST['postid'] ) ) {
    	wp_send_json_error( "L'identifiant de l'article est manquant.", 403 );
  	}

  	// Récupération des données du formulaire
  	$post_id = intval( $_POST['postid'] );
    
	// Vérifier que l'article est publié, et public
	if( get_post_status( $post_id ) !== 'publish' ) {
    	wp_send_json_error( "Vous n'avez pas accès aux commentaires de cet article.", 403 );
	}

  	// Utilisez sanitize_text_field() pour les chaines de caractères.
  	// exemple : 
    $name = sanitize_text_field( $_POST['name'] );

  	// Requête des commentaires
  	$comments = get_comments([
    	'post_id' => $post_id,
    	'status' => 'approve'
  	]);

  	// Préparer le HTML des commentaires
  	$html = wp_list_comments([
    	'per_page' => -1,
    	'avatar_size' => 76,
    	'echo' => false,
  	], $comments );

  	// Envoyer les données au navigateur
	wp_send_json_success( $html );
}

Le hook en question commence par wp_ajax_ et se termine par le nom de l’action arbitraire que vous avez définie en JS. Pour moi c’est donc wp_ajax_capitaine_load_comments.

Attention

Il faut donc comprendre ici que le nom du hook n’est pas fixe : une partie de son nom change en fonction des cas. C’est assez courant dans WordPress. D’autres hooks fonctionnent aussi de cette manière.

Par défaut, les requêtes Ajax sont dédiées seulement aux utilisateurs connectés. Pour les rendre accessibles à tous les utilisateurs, il faudra ajouter le second hook wp_ajax_nopriv.

Les deux appellent la même fonction : capitaine_load_comments().

PHP

<?php
add_action( 'wp_ajax_<action>', 'ma_fonction' );
add_action( 'wp_ajax_nopriv_<action>', 'ma_fonction' );

A partir de là, vous allez pouvoir faire ce que vous voulez : récupérer des articles, des utilisateurs, des commentaires, enregistrer de nouvelles données… Dans tous les cas, le coeur de WordPress est complètement chargé, donc vous avez accès à tout le CMS.

Vérifications des données

On commence tout d’abord par vérifier l’existence du jeton de sécurité, le fameux nonce de WordPress, et on va ensuite contrôler que les données obligatoires ont bien été envoyées, dans notre cas, l’identifiant de l’article :

PHP

<?php
// Vérification de sécurité
if( 
	! isset( $_REQUEST['nonce'] ) or 
   	! wp_verify_nonce( $_REQUEST['nonce'], 'capitaine_load_comments' ) 
) {
    wp_send_json_error( "Vous n’avez pas l’autorisation d’effectuer cette action.", 403 );
}

// On vérifie que l'identifiant a bien été envoyé
if( ! isset( $_POST['postid'] ) ) {
    wp_send_json_error( "L'identifiant de l'article est manquant.", 403 );
}

Au moindre souci, on utilise wp_send_json_error qui va interrompre le script, et renvoyer un message d’erreur. Le second paramètre permet de définir le code d’erreur HTTP 403, qui veut dire : Accès interdit (Forbidden).

Ensuite, on récupère les données et on les traite : on part du principe qu’on ne peut pas faire confiance aux données, il font donc les nettoyer.

PHP

<?php 
$name = sanitize_text_field( $_POST['name'] ); // Chaine
$post_id = intval( $_POST['postid'] ); // Nombre

Pour les textes, utilisez simplement la fonction sanitize_text_field() de WordPress. Elle s’occupe de tout et vous évitera toute injection SQL ou autre fourberie.

Et pour les nombres, un simple intval() classique de PHP suffira.

Ensuite, on va vérifier que l’article est bien publié, et en visibilité publique. Comme l’identifiant de l’article est présent dans le formulaire, il faut partir du principe que l’internaute peut modifier cette valeur, et tenter au hasard de récupérer les commentaires d’autres articles, dont certains pourraient être privés. On en reparle à la fin du cours, dans la partie sécurité.

Récupérer les commentaires

Une fois qu’on a l’identifiant de l’article, on utilise :

D’abord get_comments afin de récupérer les commentaires bruts ;
Et ensuite wp_list_comments qui les met en page en HTML ;

Mais j’aurai pu tout aussi bien lancer une WP Query et récupérer un template via get_template_part() par exemple !

Conseil

C’est ici que vous allez pouvoir faire tout ce que vous voulez avec WordPress ! Dans ce cours, je montre la récupération des commentaires, mais vous pourriez faire tout ce que vous voulez à partir de ce point. Le fonctionnement de base restera le même.

Et enfin, on renvoie le tout à JS sous forme d’une chaine HTML, qui sera injecté dans la page :

PHP

<?php
wp_send_json_success( $html );

Dans ce cas précis, c’est du HTML qui sera renvoyé à notre page. Mais on aurait pu tout aussi bien renvoyer des données brutes sous forme de JSON. On le verra d’ailleurs dans les prochains cours.

Astuce : organiser le functions.php en plusieurs sous-fichiers

Si le fichier functions.php commence à devenir trop gros, n’hésitez pas à le scinder en utilisant des includes(). J’ai pour habitude de séparer mon fichier en plusieurs plus petits, et mes requêtes Ajax finissent en général dans includes/ajax.php.

PHP

functions.php

<?php
include get_template_directory() . '/includes/ajax.php';

#4 : JS • Réceptionner les données

Afin que tout fonctionne, j’aime bien tester les différents éléments au fur et à mesure que je construits ma requête. Et pour cela on va utiliser la console du navigateur, et plus particulièrement l’onglet Network :

La console du navigateur, dans l'onglet network, montre le résultat de la requête asynchrone. — Dans la console, on peut vérifier ce que la requête a renvoyé

Vous verrez passez les requêtes sous le nom de admin-ajax.php. D’ailleurs vous pouvez filtrer les requêtes pour ne voir passer que les requêtes Ajax, ou fetch/XHR dans le jargon.

Si tout se passe bien vous devriez voir le résultat s’afficher, ici du HTML (brut).

Afficher les données dans la page

Lorsque la requête est terminée et les données retournées, le .then() de notre fetch se lance. L’argument response contient le contenu envoyé par PHP.

fetch(ajaxurl, {
    //..
.then(response => response.json())
.then(response => {
    console.log(response);
    
    // En cas d'erreur
    if(!response.success) {
        alert(response.data);
        return;
    }
    
    $(this).hide(); // Cacher le formulaire (et le bouton)
    $('.comments').html(response.data); // Afficher le HTML
});

D’ailleurs voici ce que nous renvoie PHP :

JSON

response

{
    "success":true,
    "data":"<p>Le HTML généré en back</p>",
}

On reçoit à chaque fois 2 éléments :

Une propriété success sous forme de booléen true/false ;
Une propriété data, qui contient ce que vous avez passé en paramètre : du html ou des données brutes, au choix.

On décide alors de l’injecter dans le bloc .comments, et on en profite également pour cacher le formulaire et son bouton, qui nous a permis d’afficher ces commentaires. Et le tour est joué !

Bug • Comment trouver le problème ?

Si ça ne marche pas, il va falloir vérifier plusieurs choses, côté JS mais aussi en PHP. À chaque étape, utilisez un console.log() en JS et un var_dump() en PHP pour vérifier que tout va bien. Le but étant de trouver à quel moment précis il y a un problème. Par exemple :

js/script.js

(function ($) {
    $(document).ready(function () {
        console.log('Le script JS a bien été chargé');
        
        $('.js-load-comments').submit(function (e) {
            console.log('Le formulaire a été soumis');

            const data = {
                action: $(this).find('input[name=action]').val(),
                nonce: $(this).find('input[name=nonce]').val(),
                postid: $(this).find('input[name=postid]').val(),
            }

            console.log(ajaxurl);
            console.log(data);

            fetch({
                //…
            }).then(response => {
                console.log("La requête est terminée !");
            });
        });
    });
})(jQuery);

Les console.log() devraient apparaitre dans la console du navigateur, sous l’onglet Console.

La console affiche une phrase à chaque étape réussie. — La console affiche chacune de nos étapes réussies

Et s’il y a la moindre erreur, elle apparaitra en rouge. De cette manière, vous allez pouvoir facilement débugguer vos requêtes et comprendre d’où vient le souci.

Faites-en de même pour PHP :

PHP

functions.php

<?php
add_action( 'wp_ajax_capitaine_load_comments', 'capitaine_load_comments' );
add_action( 'wp_ajax_nopriv_capitaine_load_comments', 'capitaine_load_comments' );

function capitaine_load_comments() {
  
	var_dump("La requête a bien été traitée par WordPress.");
	var_dump( $post_id );
}

Par contre, les var_dump() de PHP vont apparaitre dans l’onglet network de l’inspecteur. Sélectionnez d’abord la requête Ajax correspondante dans la liste, et cliquez sur Preview pour observer le résultat.

Aperçu d'un var_dump PHP dans l'inspecteur du navigateur — Le résultat du var_dump() s’affiche dans la preview

Et si par malheur vous faites une erreur de PHP, vous ne la verrez pas apparaitre dans l’onglet Network. Pour voir l’erreur, il faudra activer le log d’erreurs PHP afin de le consulter, et trouver l’erreur.

L'erreur PHP n'est pas affichée dans l'onglet Network de la console du navigateur — S’il y a une erreur PHP, elle n’apparaitra pas directement

Si vous avez une erreur 400 « bad request »

Si vous voyez une erreur 400 dans la console du navigateur, dans l’onglet Réseau, c’est que la requête Ajax n’a pas fonctionné.

Et pour cause, WordPress n’a pas trouvé l’action correspondante côté PHP : le nom de l’action donné en JS ne correspond pas au hook PHP de functions.php.

une erreur 400 : bad request s'affiche dans la console. La requête ajax n'a pas fonctionné — Une erreur 400 s’affiche dans la console

Vérifiez alors :

Que vous avez bien une donnée action dans votre JS ;
Que le nom de l’action en PHP est exactement le même que le hook WordPress, sans wp_ajax_ devant ;
Que le fichier contenant votre hook PHP est bien appelé (s’il n’est pas directement dans functions.php).

Sécurité : des requêtes vraiment robustes !

Pour terminer, je vous propose de passer en revue les quelques éléments essentiels que l’on a utilisé afin de sécuriser vos requêtes Ajax.

Sécuriser sa requête Ajax avec un jeton Nonce

Tout d’abord, et afin d’éviter les attaques XSS (Cross Script Scripting), vous devez impérativement ajouter un Nonce, un code généré par WordPress qui permet de certifier que l’action a été envoyée par le serveur, et pas un autre.

Pour cela il faut tout d’abord générer le nonce avec la page, et lui donner un nom. Celui-ci peut-être le même que l’action, pour plus de simplicité :

PHP

single.php

<form action="<?php echo admin_url( 'admin-ajax.php' ); ?>" method="post">
    <input 
    	type="hidden" 
        name="nonce" 
        value="<?php echo wp_create_nonce('capitaine_load_comments'); ?>"
    >
    <input type="hidden" name="action" value="capitaine_load_comments">
    <button>Charger</button>
</form>

Vous pouvez d’ailleurs utiliser la fonction wp_nonce_field() qui génère le champ pour vous. Le premier paramètre est le nom de l’action, et le second le nom du champ.

PHP

<?php
wp_nonce_field( 'capitaine_load_comments', 'nonce' );

Côté traitement de la requête, il faut en premier lieu vérifier ce Nonce :

PHP

functions.php

<?php 

function capitaine_load_comments() {
  
  // Vérification de sécurité
  if( 
     ! isset( $_REQUEST['nonce'] ) or 
     ! wp_verify_nonce( $_REQUEST['nonce'], 'capitaine_load_comments' ) 
  ) {
      wp_send_json_error( "Vous n’avez pas l’autorisation d’effectuer cette action.", 403 );
  }

Et si vous faites un plugin

Si vous être en train de coder une extension, vous allez devoir utiliser la fonction check_admin_referer() qui permet de s’assurer que l’action provient bien d’une page de l’administration de WordPress, et pas en dehors. Elle remplacera alors wp_verify_nonce().

On en reparlera dans la formation sur les extensions. Vous pouvez consulter la documentation de cette fonction ici.

Les requêtes privées

Par défaut, le hook que vous déclarez pour traiter les requête Ajax ne fonctionnera que pour les utilisateurs connectés.

Si vous souhaitez aussi donner la possibilité à n’importe quel visiteur de lancer une requête, comme par exemple charger les commentaires, ou les articles suivants, alors il faudra déclarer un second hook avec no_priv :

PHP

functions.php

<?php 
add_action( 'wp_ajax_<action>', 'ma_fonction' );
add_action( 'wp_ajax_nopriv_<action>', 'ma_fonction' );

Dans ce cas, il vous incombe de vérifier que la fonction de callback ma_fonction ne permet pas de faire des actions sensibles, comme la suppression d’un article ou la création d’un utilisateur.

Dans la fonction d’ailleurs, n’hésitez pas à utiliser les fonctions de vérification de rôle si besoin, comme :

PHP

<?php 
if( current_user_can( 'administrator' ) ) { … }

Traitement des données : Trust no one !

À partir du moment où les données viennent du front, il faut considérer qu’elles ne sont pas fiables. Vous devez alors impérativement les nettoyer afin d’éviter toute injection SQL ou toute autre filouterie :

PHP

<?php 
$name = sanitize_text_field( $_POST['name'] ); // String
$post_id = intval( $_POST['postid'] ); // Nombre

Profitez-en pour tester l’existence de la donnée en amont, afin d’éviter des erreurs PHP :

PHP

<?php
if( ! isset( $_POST['name'] ) ) {
    wp_send_json_error( "Le nom est manquant.", 403 );
}

Et si vous avez besoin de tester une adresse e-mail, WordPress possède une fonction pour ça :

PHP

<?php
$email = sanitize_text_field( $_POST['email'] );

if( ! is_email( $email ) ) { 
	wp_send_json_error( "L'e-mail n'est pas valide.", 403 );
}

Conseil

Quand vous cherchez à faire quelque chose, pensez à regarder avant tout si WordPress n’a pas déjà une fonction pour ça ! Bien souvent, vous trouverez votre bonheur

Utiliser les fonctions de WordPress pour terminer la requête

Votre requête Ajax doit impérativement se terminer par wp_send_json_success ou wp_send_json_error côté PHP.

Ces fonctions vont permettre de renvoyer des données en JSON, et de terminer proprement l’exécution du script PHP, un peu comme un die.

PHP

functions.php

<?php 
wp_send_json_error( "C'est pas bon !", 403 );

wp_send_json_success( $html ); // Renvoyer du HTML
wp_send_json_success( $array ); // Renvoyer un tableau de données

Pensez à tous les cas de figure.

Et là, ce n’est pas évident. Comme l’identifiant de l’article est indiqué dans le formulaire, rien empêche à l’internaute de modifier cette valeur, et tenter de récupérer des commentaires d’un autre article.

À priori pas de souci me direz-vous. Mais imaginez qu’il existe sur le blog des articles privés, ou des articles repassés en brouillon. Il ne faut pas que l’internaute puisse accéder à ces commentaires.

Il faut donc vérifier que l’article est publié, et public.

PHP

<?php 
// Vérifier que l'article est publié, et public
if( get_post_status( $post_id ) !== 'publish' ) {
    wp_send_json_error( "Vous n'avez pas accès aux commentaires de cet article.", 403 );
}

Cet exemple est très simpliste, mais si gérez des articles protégés par mot de passe, il faudra des vérifications supplémentaires.

Et enfin, ne réinventez pas la roue !

Utilisez tout le temps les méthodes officielles de WordPress. De cette manière, vous aurez la meilleure sécurité possible. Ne tentez pas de créer votre propre route Ajax, ou de traiter la requête hors d’un hook. Ce serait vraiment dommage !

Et voilà, vous savez désormais utiliser Ajax dans votre thème ou extension WordPress.

Il y avait pas mal de concepts à prendre en compte dans ce premier cours, dont notamment la sécurité, ainsi que des préparatif à faire en HTML, en JS et en PHP.

Mais maintenant que vous avez la technique, vous allez pouvoir l’utiliser pour toutes vos requêtes : après tout la recette reste la même.

Dans les prochains cours on va voir comment créer un « load more », faire une recherche en direct et bien d’autres encore, afin de devenir incollable avec Ajax.

Questions, réponses et commentaires

Martinez

Le 24 juin 2021

Bonjour, excellent tuto !
Par contre, j’ai un soucis avec admin-ajax.php sur la console de mon navigateur. J’ai une erreur “NS_BINDING_ABORTED”.
Sauriez-vous d’où cela peu venir ?

Répondre
1. Maxime BJ
  
  Le 24 juin 2021
  
  As-tu essayé avec un autre navigateur ? J’ai l’impression que c’est une erreur surtout sur Firefox.
  
  Répondre
Dan

Le 13 juillet 2021

Super tuto merci.
Marche parfaitement avec jQuery.

J’ai voulu testé avec du js “vanilla” et la fonction “fetch” mais je me suis heurté à une erreur 400 bad request.

Du coup je me suis rabattu sur l’api de wp (wp-api) et est créée une custom request pour obtenir le html des coms à intégré dans ma balise ol.

Que du bonheur je pense que ça va m’ être super utile.

Merci.

Répondre
1. Maxime BJ
  
  Le 14 juillet 2021
  
  Je vais mettre à jour le cours pour utiliser fetch, mais si tu as une erreur 400 c’est qu’il manque quelques chose à ta requête. Cela dit l’utilisation de l’API est une très bonne pratique dans ce cas !
  
  Répondre
  1. olivier
    
    Le 20 septembre 2021
    
    Bonjour, quand es t’il du tutoriel avec fetch ? Merci
    
    Répondre
    1. Maxime BJ
      
      Le 20 septembre 2021
      
      Je dois mettre à jour ce cours pour utiliser uniquement fetch et non plus $.Ajax de jQuery. J’ai le code prêt, mais je n’ai pas eu le temps de mettre à jour ce cours encore. Je ne sais pas par contre quand je pourrais le faire.
      
      Répondre
Julie

Le 6 décembre 2021

Bonjour,
C’est dommage d’avoir laissé tomber le projet, j’aimais bien vos cours…
Du coup je n’ai jamais implémenté AJAX parce que je ne trouve pas de bon cours sur le nonce…

Répondre
1. Maxime BJ
  
  Le 6 décembre 2021
  
  Oui surtout qu’il ne manque pas grand chose pour gérer le Nonce. Il suffit de le générer en PHP, et de le vérifier lors du traitement de formulaire. J’essaie de mettre à jour le cours prochainement.
  
  Répondre
Bourdon nicolas

Le 14 février 2022

Juste pour dire merci pour ce site captaine WP, il est nickel pour pas mal de tutoriaux wordpress! quand je vois un lien vers ce site quand je fait une recherche google, je clique direct dessus car je sais que c’est un bon tuto sans une pub pour utiliser tel ou tel plugin qui fait pas l’affaire et payant.
Merci

Répondre
1. Maxime BJ
  
  Le 14 février 2022
  
  Merci ! En effet ça me tient à coeur d’avoir ni pub, ni affiliation afin de rester le plus objectif possible !
  
  Répondre
Aurélien Denis

Le 16 mars 2022

Dans wp_localize_script le 3e argument doit être un tableau. 😉

Répondre
1. Maxime BJ
  
  Le 17 mars 2022
  
  Oui en effet, je corrige. J’ai pas mal d’autres choses à améliorer comme le retour avec wp_send_json_success() plutôt que wp_die(), ainsi que l’ajout du nonce pour la sécurité.
  
  Répondre
  1. Marin
    
    Le 16 mai 2022
    
    Merci pour ce tutoriel très synthétique !
    Sur ma configuration, [ ajaxurl => admin_url( ‘admin-ajax.php’ ) ] renvoie un warning php car ajaxurl est interprété comme une constante et non une clée du tableau.
    La passé en string à l’air de résoudre le pb :
    [ “ajaxurl” => admin_url( ‘admin-ajax.php’ ) ]
    
    Répondre
    1. Maxime BJ
      
      Le 16 mai 2022
      
      En effet, c’est une erreur de ma part. Il y a d’autres erreurs grossières dans ce cours, je me suis noté de le mettre à jour. On doit notamment finir par wp_json_send_success() et non pas wp_die(). Merci beaucoup !
      
      Répondre
      1. Marin
        
        Le 17 mai 2022
        
        C’est noté merci bcp !
        
        Répondre
Olive

Le 20 juin 2022

Dommage que ça ne soit pas assez “step by step” dans le sens ou il manque une partie (celle des articles) de plus je trouve dommage d’utiliser (encore) JQuery, je suis sur qu’il est possible de faire quelques chose de sympa sans

Répondre
1. Maxime BJ
  
  Le 20 juin 2022
  
  Je vais mettre à jour le cours prochainement (cet été) pour ajouter les notions de base de sécurité, et utiliser fetch() au lieu de jQuery Ajax. Ce sera en effet plus propre. J’en profiterai pour terminer les autres cours !
  
  Répondre
  1. Fort
    
    Le 23 juin 2022
    
    Ha super ! J’ai hâte de voir ça 🙂
    Je travaille actuellement sur un système de filtre pour afficher ou non certains éléments et les classer dans un certain ordre… La plupart de mes recherches débouche sur du JQuery :/ . Cependant on m’a aussi parlé de Axios… que j’explore actuellement…
    Mais j’ai aussi vu qu’un cours sur les filtres est en préparation ici https://capitainewp.io/formations/developper-theme-wordpress/wp-query-filtre/ !
    Hâte aussi 🙂
    
    Répondre
    1. Maxime BJ
      
      Le 23 juin 2022
      
      Il existe déjà de très bons systèmes de filtres tout fait pour WordPress, ce serait dommage de réinventer la roue. Je te recommande WP GridBuilder ou encore WP Facet. Si ton système reste simple, tu peux le coder toi même. Tu peux très bien le faire en JS standard sans librairie.
      
      Répondre
Hichem

Le 8 juillet 2022

Bonjour et merci pour ce tuto.
J’avais l’habitude de créer un seul token nonce pour toutes mes requêtes que je placais dans les paramètres avec wp_localize_script. Ensuite je récupère le jeton que j’intègre au paramètres data d’ajax. Cette méthode comporte-elle des risques ?
Merci d’avance

Répondre
1. Maxime BJ
  
  Le 8 juillet 2022
  
  En soit tu pourrais avoir un seul nonce je pense oui. Il est valide 24h à partir de sa date d’émission. Mais bon, ça ne coûte pas plus cher d’en générer un par requête au final, donc autant ne pas s’en priver. Ta méthode ne comporte pas de risque. C’est tout à fait valable comme ça aussi.
  
  Répondre
Michel

Le 6 août 2022

Excellent tutoriel.
Par contre en vous lisant on a vraiment l’impression que ajax ne sert qu’à accéder des API au sein de WordPress et donc d’accéder uniquement le serveur WordPress.
Dans une page il peut être intéressant d’accéder d’autres médias et donc la démarche avec Ajax est un peu différente…
En tout cas merci pour votre travail

Répondre
1. Maxime BJ
  
  Le 6 août 2022
  
  Ce cours est dédié au fait de faire une requête Ajax à WordPress, en passant par la route ajax prévue à cet effet. Dans un prochain cours, je montrerai comment sonder l’API de WordPress directement. Mais une requête Ajax reste une requête Ajax. Rien ne t’empêche d’aller récupérer les informations d’une autre API, ou tout ce que tu veux. Mais là, ce ne serait plus directement du WordPress ! MDN explique plutôt bien toutes les possibilités offertes par fetch : https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
  
  Répondre
Fanny

Le 2 septembre 2022

Bonjour, si un jour vous décidez de passer par une plateforme de financement pour terminer la partie ajax (surtout “Sécuriser ses requêtes Ajax avec un nonce”), je vous payerai volontiers.

Répondre
1. Maxime BJ
  
  Le 2 septembre 2022
  
  J’aborde la sécurité dans le chapitre 8 du cours. Les nonces y sont d’ailleurs abordés. Tu as donc tout le nécessaire pour faire des requêtes Ajax avec les jetons, la sanitization des données… J’ai mis à jour ce cours il y a quelques mois, il est désormais complet !
  
  Répondre
Olivier

Le 3 novembre 2022

Hello Maxime,
Merci beaucoup pour cet excellent tuto !
J’ai une erreur “Uncaught TypeError: Cannot read properties of undefined (reading ‘then’)”
Je n’arrive pas à trouver d’où ça vient.
Pouvez-vous m’aider svp ?

Répondre
1. Maxime BJ
  
  Le 14 novembre 2022
  
  je pense que du coup il y a une erreur de syntaxe dans ton fetch : le message d’erreur indique que then est attaché à undefined au lieu d’une réponse fetch.
  
  Répondre
Louise

Le 8 décembre 2022

Bonjour, est-ce que vous comptez terminer le cours un jour ? Cela fait très longtemps que j’attends la suite du cours ajax… Je suis très déçu vous étiez bon professeur.

Répondre
1. Maxime BJ
  
  Le 8 décembre 2022
  
  Avec ce cours tu as tout le nécessaire pour faire n’importe quelle requête Ajax, avec le bon niveau de sécurité. Une fois que tu as compris le concept. Tu peux faire ce que tu veux avec : charger dynamiquement les commentaires, faire un load more… C’est sûr que ce serait agréable que je vous montre d’autres exemples. Promis, j’essaie d’écrire les prochains cours rapidement
  
  Répondre

Laisser un commentaire Annuler la réponse