Envoyer un formulaire avec la méthode POST avec Ajax et jQuery

Dans un article précédent nous avons vu comment envoyer un formulaire avec AJAX pour envoyer du courrier avec ASP ou PHP, en utilisant une simple bibliothèque JavaScript utilisé pour les exemples du guide d'AJAX brasserie-lechantilly.com, ainsi que de nombreux autres articles.

La bibliothèque en question, très rapide et léger, il utilise la méthode GET pour envoyer des données, mais quand vous envoyez un formulaire dans le cas de l'utilisation de la méthode POST pour une raison simple: une chaîne de requête (les paramètres qui sont passés dans l'URL grâce à la méthode GET) ont une limite de 255 caractères, espaces compris, tandis que la méthode POST ne souffre pas de cette limitation.

Pour revenir bibliothèque très confortable jQuery , qui a très à l'aise de travailler avec des fonctions AJAX.

Prenons un exemple simple d'envoyer des données dans un POST avec AJAX, soit en les récupérant via PHP ASP, alors que le script côté serveur va simplement imprimer les données d'écran envoyées: au lecteur le soin de les gérer selon vos besoins.

Rappelons d'abord l'en-tête jquery.js bibliothèque de notre page web:

 



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

 

Nous construisons le formulaire HTML:

 <form name="modulo">



    



 Nom </ p>



    



 <p> <input type="text" name="nome" id="nome=> </ p>



    



 Nom </ p>



    



 <p> <input type="text" name="cognome" id="cognome"> </ p>



    



 <input type="button" id="bottone" value="Invia l'dati">







 </ Form>









 <div id="risultato"> </ div>

Une forme simple qui contient deux champs, un bouton et une couche d'écran imprimé sur lequel le résultat de l'opération.

Analysons maintenant le code Javascript:

 <script type="text/javascript">







 $ (Document). Ready (function () {



  



 $ ("# Bouton"). Cliquez sur (function () {



    



 var nom = $ ("# nom") val ().;



    



 var nom = $ ("# nom") val ().;



    



 $. Ajax ({



      



 Type: "POST",



      



 url: «dati.ext"



      



 dataType: "html",



      



 succès: la fonction (MSG)



      



 {



        



 . $ ("# Résultat") HTML (msg);



      



 },



      



 erreur: function ()



      



 {



        



 alert ("Appel échoué, s'il vous plaît essayez de nouveau ...");



      



 }



    



 });



  



 });







 });







 </ Script>

Nous récupérons, par la méthode Ajax, les caractéristiques de transmission: la méthode POST (), l'URL du côté serveur gérera les données (*), puis spécifier que la valeur de retour sera en format HTML et enfin d'imprimer à la vidéo le message de confirmation ou toute erreur dans l'appel.

Notez que jQuery dispose également d'un raccourci intéressant pour traiter les appels Ajax avec la méthode POST:

 <script type="text/javascript">







 $ (Document). Ready (function () {



  



 $ ("# Bouton"). Cliquez sur (function () {



    



 var nom = $ ("# nom") val ().;



    



 var nom = $ ("# nom") val ().;



    



 $ Message ("dati.ext", {name: nom, prénom: nom}.., La fonction (msg) {$ ("# result") HTML (msg );});

Lors de la méthode post (), nous avons passé, dans l'ordre, l'URL du script côté serveur qui recevra et traitera la demande, les données extraites de la forme et la fonction de rappel qui permet d'imprimer le résultat.

• <<
• 1
• 2
• >>