« retourner à la page principale du blog

Échange d’objets JSON entre PHP et JavaScript, facile grâce à jQuery

Publié le 22 novembre 2008 dans AJAX, JSON, JavaScript, PHP, jQuery

Sites internet AJAX avec jQuery

jQuery fourni un moyen efficace de sélectionner des éléments du DOM et de les affecter, mais il fourni aussi un moyen très simple de faire de l’échange AJAX. Il fourni des fonctions comme load(), $.get(), $.post(), $.ajax() et, mon sujet d’aujourd’hui, $.getJSON().

Cette fonction permet de faire une requête en envoyant un objet JSON, qui sera traduit en paramètres GET, et de reçevoir en réponse un objet JSON qui sera automatiquement traité.

Exemple

Pour démontrer le fonctionnement, je vous montre 3 fichiers. Le fichier HTML (un extrait):

<h2 id="nom"></h2>
<p id="prix"></p>
<p id="description"></p>

Le fichier Javascript:

$(function(){

  // lorsque le DOM est chargé, cette fonction sera exécutée

  $.getJSON("handler.php",  // le fichier qui recevera la requête
    {"categorie": "electronique", "produit": 3},  // les paramètres
    function(data){  // la fonction qui traitera l'objet reçu
      $("#nom").html(data.nom);
      $("#prix").html(data.prix);
      $("#description").html(data.description);
  });
});

Le fichier PHP (handler.php dans ce cas):

<?php
  // ...
  // code qui utilise $_GET['categorie'] et $_GET['produit']
  // pour ses requêtes de base de donnée
  // ...

  $reponse['nom'] = $nom;
  $reponse['prix'] = $prix;
  $reponse['description'] = $description;

  // on a notre objet $reponse (un array en fait)
  // reste juste à l'encoder en JSON et l'envoyer

  header('Content-Type: application/json');
  echo json_encode($reponse);
?>

Ce qui se produit

Lorsque le DOM de la page est chargé, jQuery envoie une requête à hanlder.php en arrière plan. La requête est un GET, donc l’URL réel demandé sera:

handler.php?categorie=electronique&produit=3

Le fichier handler.php reçoit la requête, fait les traitement nécessaire et crée un objet prêt à être envoyé. Lorsqu’il a terminé de créé son objet à envoyer, il signifit dans le header HTTP qu’il envoie une réponse JSON. Il envoie ensuite l’objet qu’il a traduit en JSON. Le script JavaScript attendait la réponse avec la fonction qui avait été passée en paramètre à $.getJSON(). L’objet est donc traité et on peut s’en servir à notre guise (dans ce cas, on affiche les informations du produit demandé).

Encore une fois, jQuery faclilite la conception

C’était donc une raison de plus d’aimer jQuery (je vous assure qu’il y en a plein d’autres là d’où elles viennent).

Laisser un commentaire

« retourner à la page principale du blog