Créer des requêtes AJAX (JSON) sur son site WordPress avec jQuery

Réaliser des appels AJAX avec jQuery puis retourner des données JSON au client Javascript est devenu un incontournable dans les applications. Il est même fort probable que son utilisation ne fasse qu’augmenter avec l’utilisation de plus en plus importante de Javascript pour la création d’application.
L’utilisation de WordPress, de son côté, comme fondation pour réaliser ces applications, est elle aussi en pleine explosion. Nous allons donc voir comment permettre à jQuery de réaliser des appels AJAX, et retourner via WordPress des données en JSON. Le tout évidement, en utilisant les fonctions natives de WordPress afin de permettre une intégration sans fausse note.

Applications

Les applications possibles sont infinies. Avec AJAX et WordPress nous pourrions :

  • Remplir un div avec des liens vers les 10 articles les plus récents après que la page soit chargée, ou au clic sur un bouton,
  • Permettre à un utilisateur de filtrer les articles par mot clé, et les résultats doivent être retournés sans rechargement de page,
  • Charger les commentaires, uniquement à la demande de l’utilisateur (avec un bouton « Afficher les commentaires » par exemple

Comment il ne faut PAS faire les choses

Avant de vous expliquer comment faire ce genre d’opération, il est bon de rappeler comment ne pas faire les choses.

Vous êtes surement familiers avec les fonctions jQuery.ajax() ou jQuery.load() pour retourner des données HTML à partir d’autres pages de votre thème WordPress. Cependant, les utiliser pour retourner tout un tas de code HTML (comme le contenu d’un div d’une page, à partir d’une URL), quand tout ce dont vous avez besoin pour travailler côté client, n’est que du texte ou un objet, peut s’avérer coûteux en terme de ressources, et demandera beaucoup de chargement ainsi que de parsing.

Une bonne manière de faire les choses

À la place, nous pouvons récupérer ce fameux texte ou cet objet depuis le serveur en utilisant JSON, qui est bien plus rapide, léger et simple à utiliser que le chargement d’une page, le parsing et le nettoyage en utilisant les autres méthodes.

Aussi, WordPress possède des fonctions pour gérer proprement ce genre de requètes, même si les développeurs ne les connaissent pas tout le temps. Donc, plutôt que de faire la requête sur une URL, dans un thème WordPress, nous allons passer par wp-admin/admin-ajax.php pour récupérer nos données. Ce fichier est un fichier natif de WordPress dont le travail est justement de gérer les requêtes AJAX et de retourner des données aussi légères que possibles. Les seuls éléments que vous récupérerez via cette URL seront vos données, au format JSON. De cette manière, vous n’aurez pas à parcourir tout un tas de HTML, pour simplement avoir voter texte ou contenu.

Réalisation

Passons maintenant au coeur du sujet. Avant tout, il faut vous assurer d’avoir :

  • Minimum WordPress 3.0 et + (Pensez à mettre vos installation à jour!)
  • Google Chrome developer tools (ou Firebug et Firefox) pour voir ce que vous faites
  • Un accès à ces 2 fichiers :
    • wp-content/votre-theme/functions.php (nous allons y ajouter les fonctions qui géreront les requêtes côté serveur)
    • wp-content/votre-theme/app.js , ou tout autre fichier javascript que vous aurez créé dans votre thème. Assurez-vous simplement qu’il soit chargé correctement afin que votre code s’exécute correctement.

Le flux des données

Maintenant, voyons comment va se passer notre requête, en prenant en compte tous les éléments (utilisateur, application, serveur…) :

  • Exécution d’un événement côté client (clic sur un bouton par exemple)
  • Le click handler de Javascript (via notre app.js) reconnait le clic et commence l’appel AJAX avec jQuery.
  • La fonction AJAX de jQuery fait la requête au serveur à l’URL qui lui est donnée (souvenez-vous que nous allons utiliser wp-admin/admin-ajax.php come URL).
  • L’URL va traiter la requête, et lancer la fonction appropriée (celle que l’on aura spécifié dans notre functions.php).
  • La fonction encode les données au format JSON, puis les affiche comme réponse.
  • La fonction AJAX jQuery accepte alors cette réponse comme un objet javascript et la retourne à la partie success handler.
  • La méthode success handler utilise alors les données de réponse pour effectuer les actions qui lui sont demandées côté client.

Un peu de sécurité

Avant tout, je tiens à vous prévenir. Je ne suis pas un expert en sécurité. Je ne suis pas responsable de ce que vous faites avec le code que je vous propose. Cela dit, le tutoriel propose une bonne base sur les méthode disponible. À vous de l’améliorer et de le sécuriser à votre besoin.
Vous pourriez par exemple commencer par utiliser des nom de fonctions et de paramètres « action » sécurisées (je vais utiliser ici « do_action » pour rester simple et clair, mais vous pouvez trouver mieux). Ne proposez pas de fonctions qui pourraient permettre de modifier ou supprimer des éléments dans votre base de données. Enfin, pensez à valider à chaque fois les valeurs passées à PHP afin d’éviter toute tentative d’injection.

Voilà. Maintenant que vous savez tout, passons au code !

Du code

Je vais commencer par créer un simple article, afin de tester notre appel AJAX. Vous pourriez créer un modèle de page pour y ajouter votre code, mais encore une fois, je vais ici rester simple pour la démonstration. Utilisez le titre que vous voulez, et ajoutez y un lien, qui servira à lancer notre fonction AJAX :

Voilà un exemple d'article qui nous permettra de lancer notre requête AJAX.

<a id="json_click_handler" href="#">Cliquez ici pour lancer votre requête. Nous allons récupérer les 10 derniers articles en JSON.</a>

Une dernière chose : ajoutez un bloc div dans lequel nous pourrons y ajouter notre résultat JSON une fois que nous aurons fait la requête.

<div id="json_response_box"></div>

ajax-json-wordpress

Création du click handler javascript dans notre app.js

Ajoutez à votre fichier javascript le code suivant :

jQuery(document).ready(function(){
     jQuery('#json_click_handler').click(function(){
          doAjaxRequest();
     });
});
function doAjaxRequest(){

     jQuery.ajax({
          url: 'http://www.votresite.com/wp-admin/admin-ajax.php',
          data:{
               'action':'do_ajax',
               'fn':'get_latest_posts',
               'count':10
               },
          dataType: 'JSON',
          success:function(data){
                 // notre gestion de l'appel sera fait ici. Nous y ajouterons le code plus tard
                             },
          error: function(errorThrown){
               alert('error');
               console.log(errorThrown);
          }

     });

}

Quelques explications sur ce code. Le click handler est simple. Si vous n’êtes pas trop familiers avec ces fonctions, je vous invit à vous rendre sur la documentation de jQuery, qui possède de nombreux exemples.

  • data : ce paramètre représente le tableau de paramètres REQUEST (GET;POST) envoyés à l’url que l’on a spécifié (wp-admin/admin-ajax.php). Toutes les valeurs que nous ajoutons à data seront disponibles comme des variables REQUEST dans admin-ajax.php. Pour y accéder, il suffira d’utiliser $_REQUEST[‘nom_de_la_variable’].
  • dataType : nous voulons que les données soient retournées en JSON, évidement.

Dans data, nous avons passé plusieurs variables :

  • ‘action’:’do_ajax’ : le paramètre action est requis par WordPress afin de dire à notre URL quelle fonction nous allons utiliser. Nous pourrions utiliser autre chose que do_ajax, mais nous devons la passer par action. Cette valeur doit correspondre à un de nos action hook de WordPress.
  • ‘fn’:’get_lastest_post’ : cette variable va demander à admin-ajax.php d’utiliser la fonction côté serveur que nous voulons utiliser, une fois que le processus do_ajax a commencé.
  • ‘count’:’10’ : le nombre d’articles que l’on souhaite récupérer.

Le clic

Vérifions que notre click handler et notre URL distante fonctionnent correctement.
Ouvrez votre outil développeur, et choisissez l’onglet Network. Il vous présentera les requêtes réseaux qui se déroulent, dont notre requête AJAX.

Rafraîchissez votre page et cliquez sur le lien que vous avez placé dans votre article, qui est maintenant associé au click handler.

Quelque chose devrait se passer dans l’onglet network. Si vous avez spécifié la bonne URL (wp-admin/admin-ajax.php), vous devriez voir sous Chrome, ce genre de réponse :

ajax-request-chrome-wordpress

Notez que le « status code » est 200 OK. C’est une très bonne chose. Cela signifie que la fonction fonctionne , et qu’elle atteint la bonne URL.

En revanche, si il y a eu une erreur, c’est ce genre de réponse que vous aurez :

error-chrome-ajax-wordpress

Si vous ne voyez rien apparaître, c’est que votre lien n’a pas bien été associé à votre click handler. Vérifiez donc votre code et que votre fichier javascript est bien chargé.

Supposons que vous voyez bien le code OK. Nous pouvons alors passer à la seconde partie de notre tutoriel, et gérer ce qu’il se passe une fois que admin-ajax.php reçois la requête.

Même si c’est admin-ajax.php qui reçoit la requête, nous n’avons pas à modifier ce fichier. Premièrement, c’est quelque chose à ne JAMAIS faire, à la moindre mise à jour de WordPress, votre travail serait écrasé et deuxièmement, il existe des action WordPress pour ça, qui sont très simple à utiliser.

Nous avons besoin de 3 fonctions dans notre fichier functions.php :

  • 2 « actions hook » qui vont dire à admin-ajax.php de lancer une certaine fonction selon le paramètre « action » que la requête AJAX va envoyer,
  • La fonction en question à lancer.

We need to add 3 components to functions.php:

add_action('wp_ajax_nopriv_do_ajax', 'notre_fonction_ajax');
add_action('wp_ajax_do_ajax', 'notre_fonction_ajax');
function notre_fonction_ajax(){
     // ici nous allons écrire ce que le serveur doit faire avec les données
}

Notez bien que le suffixe des action hooks ‘wp_ajax_nopriv_’ et ‘wp_ajax_’ correspond à notre paramètre d’action envoyé depuis l’appel jQuery.ajax() qui est ‘do_ajax’.

Cela signifie que lorsque admin-ajax.php reçoit un appel AJAX, il voit immédiatement quel est le paramètre ‘action’. Si ce dernier est défini comme ‘do_ajax’, alors il lancera ‘notre_fonction_ajax’.

Passons maintenant à notre fonction AJAX justement. Et faisons en sorte qu’elle fonctionne vraiment.

Ajoutez ce code à votre fichier :

function notre_fonction_ajax(){

   // ce switch lancera les fonctions selon la valeur qu'aura notre variable 'fn'

     switch($_REQUEST['fn']){
          case 'get_latest_posts':
               $output = ajax_get_latest_posts($_REQUEST['count']);
          break;
          default:
              $output = 'No function specified, check your jQuery.ajax() call';
          break;

     }

   // Maintenant nous allons transformer notre résultat en JSON et l'afficher

     $output=json_encode($output);
     if(is_array($output)){
        print_r($output);
     }
     else{
        echo $output;
     }
     die;

}

Comme vous pouvez le voir, nous pouvons ajouter autant de valeur qu’on le souhaite dans notre switch et donc gérer de nombreux appels différents.

Ici nous appelons ‘ajax_get_latest_posts()’, il faut donc la créer dans notre fichier functions.php :

function ajax_get_latest_posts($count){
     $posts = get_posts('numberposts='.$count);
     return $posts;
}

Nous sommes arrivé au bout de la chaîne. Vous devriez maintenant voir, si tout va bien, votre tableau d’objets correspondants aux derniers articles s’afficher dans votre console.

Si vous souhaitez les ajouter par exemple au bloc div que vous avez ajouté dans l’article, vous pouvez modifier le click handler, dans sa partie ‘success’, de cette manière :

success:function(data){
    jQuery("#json_response_box").html(data);
}

Avec un peu d’imagination, vous pouvez accomplir de nombreuses choses grâce à ces fonctions très simple.
N’hésitez pas à poser vos questions en commentaire ou à présenter ce que vous avez fait avec ce tutoriel !

NB : Cette article est fortement inspiré de : http://www.andrewmpeters.com/blog/how-to-make-jquery-ajax-json-requests-in-wordpress/ Merci à son auteur !

Mat_

Au départ on sort avec un diplôme d’ingénieur de l’ESIL (devenu Polytech’Marseille) en Informatique, réseau et multimédia, spécialisé dans les Systèmes d’Informations et Services E-Business. En même temps on bosse, on développe, on apprend. Et maintenant on entreprend.Passionné de nouvelles technologies, et évangéliste de WordPress, j’aime découvrir, tester, rechercher.

Vous aimerez aussi...

20 réponses

  1. Romain dit :

    Merci pour ce tuto très sympa en revanche a quoi sert cette function qui apparait null part ?
    « our_ajax_function »
    add_action(‘wp_ajax_nopriv_do_ajax’, ‘our_ajax_function’);

  2. Bonjour, effectivement très bon tuto !

    Dans le cadre de mon projet (Génération de « profil » dans mon wordpress à partir de données extérieures) j’ai besoin de récupérer des posts attaché à des profil avec un custom field jusque la tout va bien. Je récupère les 10 premiers post qui m’intéresse. Maintenant j’aimerais que par un scroll vers le bas ou l’appui d’un bouton je puisse récupérer les articles plus ancien.

    En gros à l’arrivée sur la page les posts 0 à 9 sont chargé. Puis à l’appui d’un bouton, que les posts 10 à 19 soient chargé.

    Ensuite j’ai besoin de chercher comment faire afficher ces résultats car pour l’instant j’ai uniquement mon tableau JSON… Je débute avec tout cela je me pose énormément de questions =)

  3. Romain dit :

    Une autre petite question par hasard 🙂 étant novice sur WP est il possible de faire la même chose que cela mais pour lister des customs post-types et non des post. Du coup remplacer : « get_latest_posts » par un équivalent ? existe-il une fonction WP qui le fasse ou doit on créer un fonction ? J’aurais besoin d’un peu de lumière 🙂

  4. David dit :

    Alleluia ! Vous m’avez sauvez la vie !
    Superbe article : simple, clair et précis !
    Un immense merci

  5. Merci pour cet article. C’est clair et concis, nickel 😉

  6. Jérémy dit :

    Bonjour,

    Merci la clarté de ce tuto.

    Jusqu’à l’obtention du json dans la console tout va bien mais je ne parviens pas à afficher le résultat dans la div avec le tout dernier code :

    success:function(data){
    jQuery(« #json_response_box »).html(data);
    }

    Le json continu d’apparaître dans ma console mais rien en html sur la page. J’ai oublié qqch ?

    merci !

  7. Jérémy dit :

    Ma page de test est accessible ici :

    http://wtn.worldtownweb.com/278/

    merci

    • Mat_ dit :

      Avec le code minifié ça va être difficile de faire un debug de tout ça :/
      Il faudrait de plus, pour le test, garder l’afficher dans la console, une fois que le click est bien pris en compte, histoire de voir ce qu’il y a dans l’objet data.

  8. Jérémy dit :

    J’ai déminifier et isoler le script en fetch.js pour y voir plus clair, au clic il semble que l’appel soit maintenant effectué 2 fois mais sans plus d’affichage côté html.

    Depuis le début, la réponse qui apparaît sur la console firebug semble être le json, validé par http://jsonlint.com/, de mes posts, mais impossible d’afficher quoique ce soit en html.

  9. Jérémy dit :

    Désolé pour les fautes d’orthographe de mon dernier com. Enfin atteins success, le problème venait de function doAjaxRequest définie en dehors de document ready.

    En la remontant à l’intérieur j’arrive à loger data dans la console mais pas encore à sortir chaque posts en html.

  10. problème résolu, merci de retirer l'adresse de test.

Suivez Kune.fr sur les réseaux sociaux !

Kune.fr est votre site de ressources web. Vous y trouverez de nombreux outils utiles pour le web.
Alors n'hésitez plus, aimez notre page !

  • Ressources Wordpress, tutoriels, plugins et thèmes
  • Ressources design, packs d'icônes, kits UI ...
Fermer cette popup
%d blogueurs aiment cette page :