Truc 6 : Formulaires : Comparaison ancien AJAX XHR vs JQUERY serialise()

Introduction:

Le moteur XHR était utilisé au début d’AJAX.

L’inconvénient était une écriture fastidieuse des variables acquises par les formulaires.

Dans mon exercice 11 Commandis, j’utilise donc désormais la sérialisation JQUERY qui automatise le tout, et c’st incroyablement plus rapide pour acquérir des données dans les champs.

EXEMPLE :

Voici mon formulaire HTML contenu dans une DIV ( C’est un Jquery Dialog) :

form1

D’abord on charge Jquery (Moi je charge tout dans index.html, cela fait un pseudo pattern MVC):

	<script	 type="text/javascript" src="librairies/jquery.js"></script>

Ensuite je crée le formulaire qui doit avoir un , cela ressemble à cela ( Je ne poste pas l’intégralité du formulaire, cela serait trop long..):


<form id="enregistrement" class="validate[required]" method="post" action="">	 
	<fieldset>
	<select name="primal" id="primal" onchange="afficherPhoto()" value=selected   >
		<option value="0"  >Choisissez le type</option> 
		<option value="1"  >Voiture</option> 
		<option value="2"  >Camion</option>
		<option value="3"  >Motos</option>
		<option value="4" >Scooter</option>
	</select>
	</fieldset>

</form>

Ensuite, ce qui est très important, c’est le button :

<button class="submit" type="submit" id="tbutton">Serialize</button>

Remarquer l’id du button, qui revient plus bas dans la fonction Jquery Serialise.

Puis …Je vais dans mon fichier ou sont stockées les fonctions javascripts … :
Voici mon ancienne fonction Javascript qui récupérait les variables de formulaire en Ajax pour passer le tout à mon fichier PHP de traitement.


function enregistrer() {   
	 /*-----------------------------Config et envoi de la requete ASYNCHRONE : */
	
		objetXHR = creationXHR();//création d'un objet XHR multi-navigateurs
	 	 
		 // acquisition des variables JAVASCRIPT provenant du formulaire 
		 var primal = document.getElementById('primal').selectedIndex;
		 var  marque = document.getElementById('marque').selectedIndex;
		 var categorie = document.getElementById('categorie').selectedIndex;
		 var piece = document.getElementById('piece').selectedIndex;
		 var  nom = document.getElementById('nom').value;
		 var nombre = document.getElementById('nombre').value;
	 	 var  prix = document.getElementById('prix').value;
		 var date = document.getElementById('date').value;
		 var perime = document.getElementById('perime').value;	
		 var reference = document.getElementById('reference').value;	
		 temps = new Date().getTime();//création d'une variable temps pour l'anti-cache
 
	 // transmission des variables acquises avec javascript au fichier PHP
	objetXHR.open("get",'enregistrer.php?primal='+primal+'&marque='+marque+'&categorie='+categorie+'&nom='+nom+'&nombre='+nombre+'&prix='+prix+'&reference='+reference+'&date='+date+'&perime='+perime+'&piece='+piece+'&anticache='+temps, true); //Config. objet XHR
	objetXHR.onreadystatechange = actualiserPageApresRecord;//désignation de la fonction de rappel
	 
	 
	 //gestion du bouton et du chargeur
	 document.getElementById("categorie").value=categorie;
	 document.getElementById("button").disabled= true;
	 document.getElementById("charge").style.visibility="visible";
	 
     objetXHR.send(null);//envoi de la requete
	 /*---------------------------------------- */
 
  }
    
	
	
	function actualiserPageApresRecord() {


	if (objetXHR.readyState == 4) {//test si le résultat est disponible
	 if (objetXHR.status == 200) {
	 var nouveauGain = objetXHR.responseText;//recup du résulat renvoyé par le serveur 
       //actualisation du résultat
	  document.getElementById("resultat").innerHTML=nouveauGain;
       // J'esayE d'actualiser ma table GOOGLE
	
	/* 	("#table_div").drawTable(); */
	   // document.getElementById("table_div").innerHTML=drawTable(); 
	
	  
	  //affiche la zone info
	/*    document.getElementById("info").style.visibility="visible"; */
	  //gestion du bouton et du chargeur
	   document.getElementById("button").disabled= false;
	   document.getElementById("charge").style.visibility="hidden";
	 }
	 
	 else{
	   //message d'erreur serveur
	   var erreurServeur="Erreur serveur : "+objetXHR.status+" – "+ objetXHR.statusText;
	   remplacerContenu("info", erreurServeur);
	   document.getElementById("info").style.visibility="visible";
	   //gestion du bouton et du chargeur
	   document.getElementById("button").disabled= false;
	   document.getElementById("charge").style.visibility="hidden";
	   //annule la requete en cours
	   objetXHR.abort();
	   objetXHR=null;
	   }
	 }
  }
  

et voici l’équivalent avec la fonction serialise() de Jquery qui récupère tout, il n’y a plus rien à taper, et ça c’est génial ! de plus la fonction de rappel peut être contenue dans success: function(data) !


  $(function() {
     $("#tbutton").click(function(){
	  //gestion du bouton et du gif animé chargeur Ajax
	 document.getElementById("categorie").value=categorie;
	 document.getElementById("button").disabled= true;
	 document.getElementById("charge").style.visibility="visible";
	/*  Si tous les champs sont bien remplis correctement : */
	 if ($("#enregistrement").validationEngine('validate')){
	
	/* Affiche les variables acquises dans le formulaire pour DEBUGGING
	alert( $("#enregistrement").serialize() ); */

	/* Place toutes les variables du formulaire dans la Var totalFormulaire */
	var totalFormulaire	= $("#enregistrement").serialize();
		
/* 	Envoie les variable au programme PHP enregistrer.php pour traitement, là c'est un enregistrement en BDD. */
	$.ajax({
            url: 'enregistrer.php',
            type: "GET",
            data: totalFormulaire,
            success: function(data) {
		/* 	Fait disparaitre l'image du chargeur Ajax et réactive le button ! */
			document.getElementById("button").disabled= false;
			document.getElementById("charge").style.visibility="hidden";
		/* 	//code to execute */
                    }
            });	
		}
	});
 });
Publicités