Introduction à l’utilisation d’AJAX dans WordPress (Traduction)

Ajax est un langage pendant du Javascript permettant d’envoyer et de récupérer des informations et de modifier une page internet sans avoir à la rafraichir. WordPress intègre nativement cette fonction mais il n’est pas forcément facile de l’utiliser. Voici un petit tutorial (très rudimentaire) pour comprendre son fonctionnement.

Cet article a une vocation uniquement pédagogique. En effet, le plugin en lui-même présente de nombreuses lacunes notamment de sécurité puisqu’il n’inclut pas la fonction « NONCE » que l’on devrait utiliser.
Pour un tutorial un peu plus complet sur le même sujet de l’utilisation d’Ajax avec WordPress du côté utilisateur, voir l’excellent article de Smashing Magazine sur la création d’un système de vote en Ajax sous WordPress

Nota Bene: Nous allons utiliser jquery pour appeler AJAX – (un petit conseil, préférez la commande ‘jQuery’ au symbole « $ » dans WordPress)

Voici le déroulé des opérations

  • Le « shortcode » insère un formulaire et une partie « réponse ». Soumettre le formulaire lance le Javascript qui a été placé sur la page en utilisant les fonctions « enqueue » and « localise scripts ».
  • La fonction jquery ajax “post” récupère les informations en provenance du formulaire et les envoie au script « the_ajax_script.ajaxurl » ( le script « localise script » aura déterminé que l’on parle ici du fichier « admin-ajax.php » )
  • « admin-ajax.php » est maintenant au courant de l’action en cours générée par le formulaire
  • WordPress lance la fonction qu’on lui a imposée: ici « the_action_function ». NB: cette fonction peut contenir tout et n’importe quoi, comme aller chercher une information dans la base de données et la ressortir
  • Le résultat de la fonction « the_action_function » est affiché dans la zone de réponse, tout cela sans avoir à raffraichir la page (c’est toute l’utilité d’Ajax)

Voici le code pour le plugin à ajouter à WordPress

  • Créez un nouveau répertoire dans celui des plugins (par exemple « Ajax-test »)
  • Copiez le fichier PHP ci-dessous et appelez-le « helloworld.php » par exmple
  • Créez un autre fichier pour le Javascript: celui-ci doit obligatoirement s’appeler « ajax.js » et se trouver dans le même répertoire
  • Activez le plugin “Hello World Ajax Frontend 2″ dans l’administration de WordPress
  • Créez un nouvel article
  • Appelez le Shortcode [hw_ajax_frontend] créé par le plugin pour afficher le contenu de manière automatique (formulaire+fonctions)
<?php
 /*
 Plugin Name: Hello World Ajax Frontend 2
 Plugin URI: http://rainrain.com
 Description: A simplified ajax front end
 Version: 2
 Author: Bob Murphy
 Author URI: http://rainrain.com
 */

// enqueue and localise scripts
 wp_enqueue_script( ‘my-ajax-handle’, plugin_dir_url( __FILE__ ) . ‘ajax.js’, array( ‘jquery’ ) );
 wp_localize_script( ‘my-ajax-handle’, ‘the_ajax_script’, array( ‘ajaxurl’ => admin_url( ‘admin-ajax.php’ ) ) );
 // THE AJAX ADD ACTIONS
 add_action( ‘wp_ajax_the_ajax_hook’, ‘the_action_function’ );
 add_action( ‘wp_ajax_nopriv_the_ajax_hook’, ‘the_action_function’ ); // need this to serve non logged in users
 // THE FUNCTION
 function the_action_function(){
 /* this area is very simple but being serverside it affords the possibility of retreiving data from the server and passing it back to the javascript function */
 $name = $_POST[‘name’];
 echo"Hello World, " . $name;// this is passed back to the javascript function
 die();// wordpress may print out a spurious zero without this – can be particularly bad if using json
 }
 // ADD EG A FORM TO THE PAGE
 function hello_world_ajax_frontend(){
 echo
 <form id="theForm">
 <input id="name" name="name" value = "name" type="text" />
 <input name="action" type="hidden" value="the_ajax_hook" />&nbsp; <!– this puts the action the_ajax_hook into the serialized form –>
 <input id="submit_button" value = "Click This" type="button" onClick="submit_me();" />
 </form>
 <div id="response_area">
 This is where we\’ll get the response
 </div>’
;
 }
 add_shortcode("hw_ajax_frontend", "hello_world_ajax_frontend");
 ?>

Et voici le fichier Javascript ( appelez le impérativement « ajax.js » )

function submit_me(){
// get name from form input
var thename = jQuery("input#name").val();
jQuery.post(the_ajax_script.ajaxurl, jQuery("#theForm").serialize()
,
function(response_from_the_action_function){
jQuery("#response_area").html(response_from_the_action_function);
}
);
}

ET VOILA! En analysant un peu le code, vous apprendrez plein de choses: comment créer un shortcode par exemple. Qui a dit que c’était compliqué?

Source: Lien vers l’article original

15 Commentaires

  1. Merci pour cet article riche en information. J’aime bien l’utilisation d’AJAX car il est a la tracée des chemins. De plus, il offre une diminution du temps de latence incroyable Mais, c’est juste dommage que certains antivirus empêche les applications web en AJAX de bien fonctionner.

    Répondre
  2. génial ! Merci beaucoup. Je suis d’accord avec toi Emilie malheureusement les antivirus ne permettent pas de bien afficher le contenu quelques fois… Marie

    Répondre
  3. merci pour ce tuto très intéressant, juste deux remarques pour l’utilisation :
    - j’ai dû remplacer les ‘ par des ‘ dans le fichier helloworld.php sinon WordPress m’envoie une erreur fatale du type ‘ce n’est pas un string’ donc je m’arrête :(
    - il faut activer le plugin dans la console d’admin pour que le shortcode soit opérationnel sinon il n’y a que [hw_ajax_frontend] qui apparait

    Je pense utiliser cette technique (plugin qui généré un short) pour générer certaine page avec beaucoup d’image ou des cases à cocher. As tu de bonnes lectures sur le net ?? merci pour les infos

    Répondre
    • ah zut satanés copiés-collés, merci pour l’info.
      Sinon oui comme tout plugin il doit être activé! ;-)

      Répondre
  4. J’ai juste à copier coller après analyser le code car la c’est tout un cours complet que tu nous donne. Un très grand merci pour le partage de connaissance.

    Répondre
  5. C’est juste ce que je cherchais! Merci beaucoup pour tes explications très complètes :)

    Coline

    Répondre
  6. Bonsoir,
    Tout d’abord merci votre code et parfait pour apprendre, simple et clair et facile à adapter.
    j’ai cependant un problème en mode debug, j’ai une erreur « wp_enqueue_script was called incorrectly ».
    après quelques recherches j’ai compris qu’il fallait inclure wp_enqueue_script(…) dans une fonction et là c’est le drame. plus d’erreurs mais la requête ajax semble HS.
    si vous avez un peu de temps pour m’orienter dans la bonne direction je suis preneur car je sèche un peu.
    P.S : voici le site ou j’ai trouvé mes infos. http://www.ophidia.net/insane/wp_register_script-wurde-fehlerhaft-aufgerufen/?lang=en.

    Répondre
  7. Merci pour cette explication bien détaillée. Il ne me reste qu’à tourner les choses en pratique.

    Répondre
  8. Merci pour cet article, depuis le temps que je pense à me mettre à utiliser ajax! Mais bon c’est pas tout il me reste encore pas mal de chemin avant d’arriver à développer des scripts moi même…

    Répondre
  9. Merci pour l’info. Quel est a votre avis le meilleur jeux?

    Répondre
  10. Merci pour l’article , c’était clair et très utile, mais je me demande pourquoi WordPress n’intègre pas le plugin par défaut c’est presque indispensable l’AJAX dans tout les sites web.

    Répondre
  11. j’aime bien votre façon. un article très bien expliqué merci infiniment

    Répondre
  12. très intéressant merci, comment êtes vous arrivé a cette conclusion?

    Répondre

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This site uses KeywordLuv. Enter YourName@YourKeywords in the Name field to take advantage.