Syntaxe
$('sel').load('nom_page', function() { //une ou plusieurs instructions });
Dans cet exemple la méthode load() contient deux arguments:
Exemple
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:
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>
$('#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'); }); });
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.
Syntaxe
$('sel').load(url,param);
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:
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¶m2=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.
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 });
A l'aide de $.get()
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:
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); } );