JQuery et Ajax – code snippets pour tous les jours

Le terme AJAX a été inventé il y a douze ans pour décrire une méthode de récupération de données à partir d’un serveur sans nécessiter de rafraîchissement de page. Parmi plusieurs autres fonctionnalités incroyables, jQuery est connu pour rendre l’ensemble du processus AJAX plus simple.Dans cet article, j’ai compilé des extraits de code prêts à utiliser pour les besoins quotidiens: envoi de données avec la méthode GET et POST, récupération de texte ou Json à partir de pages distantes, et plus encore.

Remarque: cet article n’utilise pas le raccourci $ pour l’objet jQuery .

Envoyer des données en utilisant la méthode GET

jQuery.get() est une fonction abréviation AJAX, qui charge les données du serveur à l’aide d’une requête HTTP GET. L’extrait suivant montre comment envoyer deux valeurs à une page nommée mypage.php .

 jQuery(document).ready(function () {
	 jQuery.get("mypage.php", {nom: "John", heure: "2pm"})
		 .done(function(data) {
		 alert("Data Loaded:" + data);
	 });
 });

Envoyer des données en utilisant la méthode POST

Similaire à jQuery.get(), jQuery.post() charge les données du serveur à l’aide d’une requête HTTP POST. Le code ci-dessous montre comment envoyer une demande POST à page.php lorsque le button est cliqué.

 jQuery ("bouton").click(function() {
     jQuery.post ("page.php", function(data, status) {
         Alert("Données:" + data + "\ nStatus:" + status);
     });
 });

Récupération de texte à partir d’une page Web

jQuery.load() rend extrêmement facile de récupérer du texte à partir d’une page Web spécifique. La méthode permet d’obtenir uniquement une partie spécifique du document, de sorte que vous ne devez pas obtenir la page entière et l’analyser par la suite.

 <ol id="new-projects"></ol>
 
 <Script>
 jQuery(document).ready(function () {
	 jQuery("#new-projects").load("/resources/load.html #projects li");
 });
 </ Script>

Obtenez toutes les valeurs du formulaire et envoyez-les à une page

Voici un extrait super pratique que j’utilise très souvent. Cela #form très simplement : une fois que l’ #submit clique sur #submit, les données de #form sont sérialisées et envoyées à une page distante à l’aide de la méthode POST.

 jQuery(document).ready(function() {
	 jQuery("#submit").click(function () {
		  jQuery.post("https://yoursite.com/yourpage.php", jQuery('#form').serialize())
			 .done(function(data) {
			 alert(data);
		 }); 
		 return false;
	 });
 });

Récupérer les données JSON

Dans les premiers jours d’AJAX, les données envoyées par un serveur étaient principalement formatées en XML. De nos jours, la plupart des applications modernes utilisent JSON comme format pour les données du serveur.

La getJSON() charge les données codées JSON du serveur à l’aide d’une requête GET HTTP. L’exemple ci-dessous montre comment utiliser jQuery pour récupérer les données codées JSON.

 jQuery.getJSON("http://yoursite.com/test.json", function(data) {
         alert(data);
 });

Une fois que vous obtenez votre JSON à partir du serveur, utilisez la JSON.parse() pour transformer les données en un objet JavaScript:

 jQuery.getJSON("http://yoursite.com/test.json", function(data) {
         Var obj = JSON.parse(data);
         jQuery("#container").html(obj.name + "," + obj.age");
 });