Trimiteţi un formular cu metoda POST cu AJAX si jQuery

Intr-un articol precedent am vazut cum se trimite un formular cu AJAX pentru a trimite e-mail cu ASP sau PHP, folosind un simplu bibliotecă JavaScript utilizate pentru exemple de folosire a AJAX ecuries-du-fourneau.com, precum şi multe alte elemente.

Biblioteca în cauză, foarte rapid şi uşor, se foloseşte metoda GET pentru transmiterea de date, dar atunci când trimiteţi un formular, în cazul folosirii metodei POST pentru un motiv simplu: o querystring (parametrii care sunt transmise în adresa URL prin metoda GET) au o limită de 255 de caractere, inclusiv spaţii, în timp ce metoda POST nu suferă de această limitare.

Pentru a reveni bibliotecă foarte confortabil jQuery , care are foarte confortabil pentru a lucra cu funcţii de AJAX.

Sa luam un exemplu simplu de a trimite date într-un post cu AJAX, fie prin preluarea acestora prin intermediul PHP ASP, întrucât server-side script-ul va afisa datele de ecran a trimis: cititorului sarcina de a le gestiona în funcţie de nevoile tale.

Amintim în primul antetul jquery.js biblioteca a paginii noastre web:

 



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

 

Noi construim formularul HTML:

 <form name="modulo">



    



 Nume </ p>



    



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



    



 Numele de familie </ p>



    



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



    



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







 </ Form>









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

Un formular simplu pentru care conţine două câmpuri, un buton şi un strat ecran de imprimat pe care rezultatul operaţiei.

Să analizăm acum codul Javascript:

 <script type="text/javascript">







 $ (Document) Ready (function (). {



  



 $ ("# Button"). Faceţi clic (function () {



    



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



    



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



    



 $. Ajax ({



      



 Tipul: "POST",



      



 url: "dati.ext"



      



 datatype: "html",



      



 succes: Funcţia (msg)



      



 {



        



 . $ ("# Rezultat") HTML (msg);



      



 },



      



 Eroare: function ()



      



 {



        



 alert ("Apel nu a reuşit, vă rugăm să încercaţi din nou ...");



      



 }



    



 });



  



 });







 });







 </ Script>

Noi recupera, prin metoda Ajax, caracteristicile de transmisie: metoda (POST), URL-ul de partea de server se va ocupa de date (*), apoi specificaţi că valoarea returnată va fi în format HTML şi în cele din urmă de imprimare la film mesajul de confirmare sau de orice eroare în apel.

Reţineţi că jQuery are, de asemenea, o comandă rapidă interesant să se ocupe de apelurile Ajax cu metoda POST:

 <script type="text/javascript">







 $ (Document) Ready (function (). {



  



 $ ("# Button"). Faceţi clic (function () {



    



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



    



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



    



 Mesaj $ ("dati.ext", {name: numele, prenumele: numele}.., Funcţia (msg) {$ ("# rezultat") HTML (msg );});

La metoda POST (), am trecut, în ordine, URL-ul de script-ul server-side, care va primi şi procesa solicitarea, datele preluate din formularul şi funcţie de apel invers, care va imprima de ieşire.

• <<
• 1
• 2
• >>