NuxBSD: Free Infos

Table des matières

Charger des information avec la méthode load()

Charger des information avec la méthode load()

1. Charger des informations stockées sur le serveur et mettre à jour un élément de la page actuelle

Syntaxe

  $('sel').load('nom_page', function() {
    //une ou plusieurs instructions
  });

Dans cet exemple la méthode load() contient deux arguments:

nom de la page
l'exécution d'une fonction anonyme

Exemple

Chargement de l’entièreté du contenu d'un fichier

custom.js

$(function(){
    $('#majPremier').click(function() {
        $('#premier').load('maj1.php', function() {         // chargement de l’entièreté du fichier
            alert('La première zone a été mise à jour');
        });
    });
 
    $('#majDeuxieme').click(function() {
        $('#deuxieme').load('maj2.php', function() {        // chargement de l’entièreté du fichier
            alert('La deuxième zone a été mise à jour');    
        });
    });
});

Lors du clic sur le bouton:

on atteint $('#majPremier').click(function()
load() charge le fichier maj1.php
atteint id #premier et le remplace par le contenu du fichier maj1.php
idem pour le deuxième fichier maj2.php

page.php

    <style type="text/css">
      div { width: 400px; height: 300px; float: left; margin: 5px; }
      #premier { background-color: #F6E497; }
      #troisieme { background-color: #CAF1EC; }
      #quatrieme { background-color: #F1DBCA; }
    </style>
 
  </head>
  <body>
      <button id="majPremier">Mise à jour première zone</button>
      <button id="majDeuxieme">Mise à jour deuxième zone</button><br /><br />
 
      <div id="premier">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>
      <div id="deuxieme">
        <img src="image1.jpg">
      </div>
      <div id="troisieme">
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
      <div id="quatrieme">
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
        eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
      </div>
  </body>

maj1.php

  <body>
     Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit 
     laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure 
     reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum 
     qui dolorem eum fugiat quo voluptas nulla pariatur?
     Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit 
     laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure 
     reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum 
     qui dolorem eum fugiat quo voluptas nulla pariatur?     
  </body>

maj2.php

  <body>
      <img src="image2.jpg">
  </body>

Chargement uniquement d'une partie du contenu d'un fichier

    $('#majPremier').click(function() {
        $('#premier').load('maj.php #modif1', function() {  // chargement uniquement d'une partie du fichier    
            alert('La première zone a été mise à jour');
        });
    });
 
    $('#majDeuxieme').click(function() {
        $('#deuxieme').load('maj.php #modif2', function() {        // chargement uniquement d'une partie du fichier            
            alert('La deuxième zone a été mise à jour');    
        });
    });

Passer des paramètres à PHP

En utilisant jQuery pour créer des adresses URL on peut interroger une base de donnée et retourner des informations qui dépendent des paramètres passés dans l'URL.

Première forme de la méthode load()

Syntaxe

  $('sel').load(url,param);

sel est le selecteur jQuery qui permet d'identifier le ou les éléments à mettre à jour
url est le nom de la page qui contient les données pour la mise à jour
parm vaut “id=5, p=14” et url vaut http://site.fr/page.php, donc la page utilisée pour la mise à jour sera http://site.fr/page.php?id=5&p=14

custom.js

$(function(){ 
    $('#action').click(function() {
          var param = 'l=' + $('#ref').val();
          $('#r').load('proverbes.php',param);
    });  
}); // FIN DE LA FUNCTION

page.php

  <body>
    <input type="text" id="ref">
    <button id="action">Afficher</button><br />
    <div id="r">Entrez un nombre compris entre 1 et 10 pour afficher un proverbe chinois</div>
  </body>

proverbes.php

$proverbe = array("On ne rassasie pas un chameau en le nourrissant à la cuillère.",
                  "Connaître son ignorance est la meilleure part de la connaissance.",
                  "Une maison en paille où l'on rit, vaut mieux qu'un palais où l'on pleure.",
                  "Le vrai voyageur ne sait pas où il va.",
                  "Point n'est besoin d'élever la voix quand on a raison.",
                  "Un ami c'est une route, un ennemi c'est un mur.",
                  "Un peu de parfum demeure toujours sur la main qui te donne des roses.",
                  "Si élevé que soit l'arbre, ses feuilles tombent toujours à terre.",
                  "Si ce que tu as à dire n'est pas plus beau que le silence, tais toi.",
                  "Trois coupes de vin font saisir une doctrine profonde.");
$l=$_GET["l"];
if (($l != "") && ($l>0) && ($l<11)) //1 à 10
{
  echo "<u>Proverbe chinois N° ".$l."</u><br><br>";
  echo "<b>".$proverbe[$l-1]."</b>";
}    
else
  echo "<font color=red>Entrez un nombre compris entre 1 et 10 !</font>";

Lors du clic sur le bouton:

la méthode val() est appliquée à la zone #ref
la valeur ainsi obtenue est mémorisée dans la variable param
- exemple si on tape “5” param contiendra l=5
la méthode load() charge tout le contenu de proverbes.php et met à jour l'élément <div id=“r”> * le traitement est contenu dans proverbes.php

Deuxième forme de la méthode load()

En passant un Objet en deuxième argument à la méthode load().

Par exemple en passant le couple paramètres/valeurs en utilisant la fonction suivante :

  $('sel').load('http://www.site.com/page.php',{ id:50, nom: 'durand'});

Dans cet exemple le couple paramètres/valeurs id:50 et nom:'durand' sont passés !

Attention dans ce cas ci les valeurs sont passées par une requête HTTP POST et elles devront donc être récupérées de la sorte par le programme PHP.

À chaque manipulation faite par l'utilisateur, le navigateur envoie une requête au serveur contenant une référence à une page Web (http://www.site.com/page.php?param1=15&param2=rougepar exemple). Le serveur effectue les calculs nécessaires et renvoie le résultat au navigateur sous forme d'une page Web. Les requêtes peuvent être de typeGET(apparentes dans l'adresse URL) ou POST(absentes de l'adresse URL). Selon la méthode utilisée, les instructions permettant de récupérer les données côté serveur seront différentes.

Requêtes GET

La fonction $.get()

En parallèle de la méthode load(), on peut utiliser la fonction jQuery $.get() pour obtenir des données envoyées par le serveur en utilisant une requête HTTP GET.

Syntaxe

  $.get(adresse, données, function() {
  // Une ou plusieurs instructions
});

adresse est le nom d'une page Web dont le contenu sera récupéré par la fonction $.get();
données représente les données à passer à la page Web par une requête HTTP GET;
si elle est précisée, la fonction de call-back est uniquement exécutée lorsque la méthode a été exécutée, c'est à dire lorsque tout les éléments ont été mis à jour.

En pratique avec $.get()

A l'aide de $.get()

modifier le code précédent pour récupérer de code HTML retourné par une page PHP
l'afficher dans une boîte de message

page.php

  <body>
    <button id="action">Lancer la requête HTTP GET</button><br />
  </body>

custom.js

      $(function() {
        $('#action').click(function() {
          $.get('proverbes.php?l=9', function(data) {
            alert(data);
          });    
        });  
      });

Lors du clic sur le bouton:

le bouton déclenche la méthode $.get()
le premier paramètre de la fonction contient l'adresse de la page à exécuter (içi proverbes.php)
le deuxième paramètre correspond à la fonction de call-back grâce à laquelle les données retournées par la page PHP seront alors récupérées.
le paramètre data ayant été passé en argument de la fonction de call-back, il suffit de l'utiliser pour récupérer les données affichées par la page.
ces données sont alors affichées dans une boite de message avec la fonction alert()

Requêtes POST

La fonction $.post()

La fonction $.post() est utilisée lorsque l'on souhaite envoyer des données de grandes tailles ou sensibles au serveur.

custom.js

  $.post('traiteFormulaire.php', 
      { 
        nom: 'Pierre34', 
        heure: '2pm', 
        post='Un peu de texte récupéré dans un  formulaire HTML et destiné à être posté dans un forum.' 
      },
         function(data) {
         alert(data);
        }
  );