AJAX et JQuery https://www.youtube.com/watch?v=IyCnbyWZkRU
JQuery Permet d'écrire des programmes sans de soucier des étapes de préparation des objets HTTPRequest Exemple: Chargement d'un fichier avec la méthode load(): $("Sélecteur").load(URL, données, function () { Code JQuery });
La méthode load() Utilisée pour télécharger une fichier HTML existant ou appeler une ressource programme. load(URL, données, function(){…}); Passage de données au programme dans le paramètre données: {"nom1" : valeur1, "nom2":valeur3, …} nom1, nom2,… sont des noms de champs qui contiennent valeur1, valeur2, ... $("#div1").load("www.xyx.com/traitement.php ", {'prenom':"Joseph", "age":32 } );
Exemple de requête <!-- Fichier: ajax1.html --> <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#charger").click(function(){ $("div").load(exemple1.html'); }); </script> </head> <body> <div> Le contenu actuel </div> <button id="charger"> Charger le document HTML</button> </body> </html>
La méthode get() Permet de lire des données à partir d'un serveur en utilisant la méthode GET: jQuery.get( URL, données, fonction, type ) Les données sont sous la forme : {"nom1" : valeur1, "nom2":valeur3, …} ou nom1:valeur1&nom2:valeur3, … La fonction (callback anonyme) est exécutée une fois une réponse correcte est reçue. type (optionnel) désigne le type du résultat envoyé par ce serveur: xml, html, text, etc.
La méthode get() La fonction peut avoir un paramètre qui représente le résultat: function(donneesReponse, etat) { … code de la fonction utilisant donneesReponse… } function(donneesReponse) { $('#contenu').html(donneesReponse); }
La méthode get() <!-- Fichier : ajax4.html --> <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $("#charger").click(function(){ $.get( 'traitement.php' {nom: "Lafleur", prenom:"Alain", age:32} function(donneesReponse) { $('#contenu').html(donneesReponse); } ); }); </script> <style type="text/css"> #contenu { background: yellow; border:1px solid blue; font-family: arial; } </style> </head> <body> <div id="contenu"> Contenu initial .... </div> <button id="charger"> Charger les donnees </button> </body> </html> <!-- Fichier : traitement.php --> <?php if( $_GET['nom'] ) { $nom = $_GET['nom']; $prenom = $_GET['prenom']; $age = $_GET['age']; echo "Vous avez soumis : <br />"; echo "Nom : <b> ".$nom."</b> <br />"; echo "Prenom: <b>".$prenom."</b> <br />"; echo "Age: <b>".$age."</b> <br />"; } ?>
La methode post() Permet de lire des données à partir d'un serveur en utilisant la méthode POST: jQuery.get( URL, données, fonction, type ) La fonction peut avoir un paramètre qui représente le résultat retourné par le programme de traitement: function(resultat ,etat){ $('#div1').html(resultat);};
La méthode post() <!– Fichier: jQajax6.html <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#go').click(function(event){ $.post("traitement.php", {name: "Alain", age: 32}, function(resultat,etat){ $('#div1').html(resultat); }); </script> </head> <body> <div id="div1"> </div> <button id="go"> Go </button> </body> </html> <!-- Fichier: traitemenet.php --> <?php $leNom=$_POST['nom']; $lAge=$_POST['age']; echo "<h2> Resultat du traitement </h2>"; echo "Nom: ".$leNom. "<br/>"; echo "Age: ".$lAge. "<br/>"; ?>
La méthode post() et des formulaires On doit extraire les données du formulaire dans le client et les soumettre comme paramètres au serveur. Voir: https://www.youtube.com/watch?v=d92nyonex8U