Send inn en form med POST-metoden med AJAX og jQuery

I en tidligere artikkel så vi hvordan du sender et skjema med AJAX for å sende e-post med ASP eller PHP, ved hjelp av en enkel JavaScript-bibliotek som brukes til eksempler av veiledningen til AJAX christiane-lecomte.com, samt mange andre elementer.

Biblioteket i spørsmålet, veldig fort og lett, bruker den GET-metoden for å sende data, men når du sender et skjema i tilfelle bruke POST metoden for en enkel grunn: en spørrestrengsamling (parameterne som er vedtatt i URLen gjennom GET-metoden) har en grense på 255 tegn inkludert mellomrom, mens POST metoden ikke lider av denne begrensningen.

For å returnere svært komfortable bibliotek jQuery , som har svært behagelig å jobbe med AJAX funksjoner.

La oss ta et enkelt eksempel å sende data i en POST med AJAX, enten ved å hente dem via PHP ASP, mens server-side skript vil rett og slett ut på skjermen data som sendes: til leseren oppgaven med å administrere dem i henhold til dine behov.

Først husker biblioteket jquery.js overskriften på vår web side:

 



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

 

Vi bygger HTML form:

 <form name="modulo">



    



 <p> Navn </ p>



    



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



    



 <p> Etternavn </ p>



    



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



    



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







 </ Form>









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

Et enkelt skjema som inneholder to felt, en knapp og en skjerm trykt laget som resultatet av operasjonen.

La oss nå analysere Javascript-kode:

 <script type="text/javascript">







 $ (Document). Ready (funksjon () {



  



 $ ("# Button"). Klikk (funksjon () {



    



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



    



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



    



 $. Ajax ({



      



 type: "POST",



      



 url: "dati.ext"



      



 datatype: "html",



      



 suksess: funksjon (msg)



      



 {



        



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



      



 },



      



 Feil: funksjon ()



      



 {



        



 alert ("Call feilet, prøv igjen ...");



      



 }



    



 });



  



 });







 });







 </ Script>

Vi gjenopprette, gjennom Ajax-metoden, som kjennetegner overføring: vil metoden (POST), URL-adressen til serveren side håndtere data (*), deretter angi at returverdien vil være i HTML-format og til slutt ut til video bekreftelsesmeldingen eller eventuelle feil i samtalen.

Merk at jQuery også har en interessant snarvei for å håndtere Ajax samtaler med POST-metoden:

 <script type="text/javascript">







 $ (Document). Ready (funksjon () {



  



 $ ("# Button"). Klikk (funksjon () {



    



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



    



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



    



 $ Post ("dati.ext", {name: navn, etternavn: etternavn}.., Funksjon (msg) {$ ("# resultat") HTML (msg );});

På innlegget ()-metoden har vi passerte, i rekkefølge, URL-adressen til server-side skript som vil motta og behandle forespørselen, hentet dataene fra skjemaet og tilbakering funksjon som vil skrive ut utgang.

• <<
• 1
• 2
• >>