Presentar un formulari amb el mètode POST amb AJAX i jQuery

En un article anterior vam veure com enviar un formulari amb AJAX per enviar un correu electrònic amb ASP o PHP, utilitzant una simple llibreria Javascript usat en els exemples de la guia per AJAX centre-equestre-sarremas.com, així com de molts altres articles.

La biblioteca en qüestió, molt ràpid i lleuger, utilitza el mètode GET per enviar dades, però quan s'envia un formulari en el cas d'utilitzar el mètode POST per una raó simple: una cadena de consulta (paràmetres que es passen a la URL mitjançant el mètode GET) tenen un límit de 255 caràcters inclosos els espais, mentre que el mètode POST no pateixen d'aquesta limitació.

Per tal de retornar la biblioteca molt útil jQuery funció que té molt còmode per treballar amb AJAX.

Prenguem un exemple senzill d'enviar dades en AJAX POST, ja sigui mitjançant la recuperació d'ells a través d'ASP i PHP, mentre que l'script de servidor simplement imprimir les dades de vídeo enviats: per al lector la tasca d'administrar d'acord a les seves necessitats.

Recordem en primer lloc la capçalera de la biblioteca jquery.js de la nostra pàgina web:

 



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

 

Construïm el formulari HTML:

 <form name="modulo">



    



 Nom </ p>



    



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



    



 Nom <p> Darrera </ p>



    



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



    



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







 </ Form>









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

Un mòdul senzill que conté dos camps, un botó i una capa de serigrafia en la qual el resultat de l'operació.

Anem ara el codi javascript:

 <script type="text/javascript">







 $ (Document). Ready (function () {



  



 $ ("# Botó"). Feu clic a (function () {



    



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



    



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



    



 $. Ajax ({



      



 tipus: "POST",



      



 url: "dati.ext"



      



 tipus de dades: "html"



      



 èxit: function (msg)



      



 {



        



 . $ ("# Resultats") Html (msg);



      



 },



      



 error: function ()



      



 {



        



 alert ("Truqui per favor-ho a provar ...");



      



 }



    



 });



  



 });







 });







 </ Script>

Ens recuperem, a través del mètode de ajax, les característiques de la transmissió: el mètode (POST), l'adreça URL del servidor s'encarregarà de les dades (*), a continuació, especificar que el valor de retorn serà en format HTML i, finalment, imprimir en vídeo el missatge de confirmació o d'error en la trucada.

Tingueu en compte que jQuery també té un accés directe a interessants per manejar les trucades Ajax, amb el mètode POST:

 <script type="text/javascript">







 $ (Document). Ready (function () {



  



 $ ("# Botó"). Feu clic a (function () {



    



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



    



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



    



 $ Missatge ("dati.ext", {name: nom, cognom cognom} .., Function (msg) {$ ("# resultat") Html (msg );});

En el mètode post () hem passat la comanda, l'URL de l'script del costat del servidor que rebrà i processarà la sol · licitud, les dades recuperats de la forma i la funció callback que s'imprimirà el resultat.

• <<
• 1
• 2
• >>