Médiaforma

jQuery – Requête POST

Print Friendly

Dans l’exemple précédent, les paramètres passés apparaissaient dans l’URL. Pour garder les paramètres secrets ou pour passer des données de taille importante, vous utiliserez une requête POST.

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

$.post(URL, {donnée1: 'valeur1', donnée2: 'valeur2',…}, function() {

// Une ou plusieurs instructions exécutées lorsque les données ont été rapatriées

});

 

Ici, les données sont passées dans le deuxième paramètre de la fonction $.post().

Nous allons modifier le code du programme précédent pour accéder aux données via une requête POST.

L’URL interrogée aura pour nom donneesPost.php. Une seule donnée nommée « l » sera communiquée. Elle aura pour valeur 1, 2 ou 3 selon la loi à afficher.

Le programme PHP est légèrement différent :

<?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=$_POST["l"];
  echo "<u>Loi de la robotique N° ".$l."</u><br><br>";
  echo "<b>".$loi[$l-1]."</b>";
?>

Le code HTML5/jQuery est également légèrement différent :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Requête AJAX $.post()</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><br>
    <div id="zone"></div>
    <script>
      $(function() {
        $('#loi1').on('click', function(){
          $.post('donneesPost.php',{l:'1'},function(data){
            $('#zone').html(data);
          });
        });
        $('#loi2').on('click', function(){
          $.post('donneesPost.php',{l:'2'},function(data){
            $('#zone').html(data);
          });
        });
        $('#loi3').on('click', function(){
          $.post('donneesPost.php',{l:'3'},function(data){
            $('#zone').html(data);
          });
        });
      });
    </script>
  </body>
</html>

 

Le résultat est bien entendu le même que pour la requête GET.

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

No comments yet.

Leave a Reply