Médiaforma

jQuery – Requête GET

Print Friendly

La méthode load() n’est pas la seule à pouvoir récupérer des données via AJAX. Vous pouvez également utiliser :

  • la fonction jQuery $.get() pour obtenir des données envoyées par le serveur en utilisant une requête HTTP GET.
  • la fonction jQuery $.post() pour obtenir des données envoyées par le serveur en utilisant une requête HTTP POST.

Vous utiliserez la fonction $.get() si les données envoyées au serveur sont de petite taille. Vous utiliserez la fonction $.post() si les données envoyées au serveur sont de grande taille ou contiennent des informations confidentielles (des mots de passe par exemple).

 

Voici la syntaxe de la fonction $.get() :

$.get(URL, function() {
  // Une ou plusieurs instructions exécutées lorsque les données ont été rapatriées
});

 

A titre d’exemple, nous allons exécuter un fichier PHP afin d’extraire les données qui y sont stockées. Ces données correspondent aux trois lois de la robotique d’Isaac Asimov. L’URL passée sera du type suivant :

donnees?l=1 // pour obtenir la première loi
donnees?l=2 // pour obtenir la deuxième loi
donnees?l=3 // pour obtenir la troisième loi

 

Voici le code du fichier PHP :

<?php
  $loi = array("Un robot ne peut porter atteinte à un être humain, ni, restant passif, permettre qu'un être humain soit exposé au danger.",
               "Un robot doit obéir aux ordres que lui donne un être humain, sauf si de tels ordres entrent en conflit avec la Première loi.",
               "Un robot doit protéger son existence tant que cette protection n'entre pas en conflit avec la Première ou la Deuxième loi.");
  $l=$_GET["l"];
  echo "<u>Loi de la robotique N° ".$l."</u><br><br>";
  echo "<b>".$loi[$l-1]."</b>";
?>

 

Les premières lignes définissent le tableau $loi et y mémorisent les trois lois de la robotique.

La valeur passée dans l’URL est récupérée et stockée dans la variable $l :

$l=$_GET["l"];

 

L’instruction suivante affiche un texte souligné :

echo "<u>Loi de la robotique N° ".$l."</u><br><br>";

 

Et la dernière instruction affiche la loi extraite du tableau $loi :

echo "<b>".$loi[$l-1]."</b>";

 

 

 

Voici le résultat obtenu lorsque l’utilisateur clique sur le premier bouton :

 

 

Et voici le code HTML5/jQuery utilisé :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Requête AJAX $.get()</title>
    <style>
      #zone {
        width: 300px;
        height: 315px;
        border-style: solid;
        border-width: 3px;
        border-color: black;
      }
    </style>
  </head>
  <body>
    <script src="jquery.js"></script>
    <h2>Les lois de la robotique, selon Isaac Asimov</h2>
    <button id="loi1">Loi N° 1</button>
    <button id="loi2">Loi N° 2</button>
    <button id="loi3">Loi N° 3</button><br/>
    <div id="zone"></div>
    <script>
      $(function() {
        $('#loi1').on('click', function(){
          $.get('donnees.php?l=1',function(data){
            $('#zone').html(data);
          });
        });
        $('#loi2').on('click', function(){
          $.get('donnees.php?l=2',function(data){
            $('#zone').html(data);
          });
        });
        $('#loi3').on('click', function(){
          $.get('donnees.php?l=3',function(data){
            $('#zone').html(data);
          });
        });
      });
    </script>
  </body>
</html>

 

Le corps du document définit un titre H2, trois boutons et un élément div d’id #zone.

<h2>Les lois de la robotique, selon Isaac Asimov</h2>
<button id="loi1">Loi N° 1</button>
<button id="loi2">Loi N° 2</button>
<button id="loi3">Loi N° 3</button><br/>
<div id="zone"></div>

 

Lorsque le premier bouton est cliqué, une requête GET est effectuée sur l’URL http://www.mediaforma.com/encours/donnees.php?l=1 :

$('#loi1').on('click', function(){
  $.get('donnees.php?l=1',function(data){

 

Lorsque les données ont été rapatriées, la fonction callback s’exécute. Les données récupérées sont affichées dans l’élément div #zone :

$('#zone').html(data);

 

Les deux autres boutons ont un comportement similaire, à ceci près qu’ils envoient (respectivement) les paramètres l=2 et l=3 au programme PHP. Ceci afin d’afficher la deuxième et la troisième loi de la robotique.

Cet exemple est accessible à partir de l’URL suivante : http://www.mediaforma.com/encours/get.htm

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply