Verstuur een formulier met POST methode met AJAX en jQuery

In een vorig artikel zagen we hoe u een formulier te sturen met AJAX om mail te sturen met ASP of PHP, met behulp van een eenvoudige JavaScript-bibliotheek gebruikt voor de voorbeelden van de gids voor AJAX decoup-og-31.com, evenals vele andere items.

De bibliotheek in kwestie, zeer snel en lichtgewicht, maar maakt gebruik van de GET methode voor het verzenden van gegevens, maar wanneer u een formulier te sturen in het geval van het gebruik van de POST-methode voor een simpele reden: een querystring (de parameters die worden doorgegeven in de URL via de GET-methode) hebben een limiet van 255 tekens inclusief spaties, terwijl de POST-methode geen last van deze beperking.

Met het oog op een zeer comfortabele bibliotheek terug te keren jQuery , die is zeer comfortabel om te werken met AJAX functies.

Laten we eens een eenvoudig voorbeeld van het verzenden van data in een POST met AJAX, hetzij door het ophalen van ze via PHP ASP, terwijl de server-side script zal gewoon af te drukken de verzonden gegevens scherm: om de lezer de taak van het beheren ze volgens uw behoeften.

Eerste herinneren aan de bibliotheek jquery.js header van onze webpagina:

 



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

 

We bouwen de HTML-formulier:

 <form name="modulo">



    



 <p> Naam </ p>



    



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



    



 <p> Achternaam </ p>



    



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



    



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







 </ Form>









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

Een eenvoudige vorm die twee velden, een knop en een scherm gedrukt laag bevat waarop het resultaat van de operatie.

Laten we nu de Javascript-code te analyseren:

 <script type="text/javascript">







 $ (Document). Ready (function () {



  



 $ ("# Button"). Click (function () {



    



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



    



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



    



 $. Ajax ({



      



 type: "POST",



      



 url: "dati.ext"



      



 datatype: "html",



      



 succes: functie (msg)



      



 {



        



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



      



 },



      



 fout: function ()



      



 {



        



 alert ("Call mislukt, probeer het opnieuw ...");



      



 }



    



 });



  



 });







 });







 </ Script>

Wij herstellen, door de ajax-methode, de kenmerken van verzending: de methode (POST), de URL van de server side zal de data (*) greep, geef dat de terugkeer waarde zal worden in HTML-formaat en tenslotte af te drukken op video het bevestigingsbericht of een fout in het gesprek.

Merk op dat jQuery ook een interessante snelkoppeling naar Ajax gesprekken af ​​te handelen met de POST methode is:

 <script type="text/javascript">







 $ (Document). Ready (function () {



  



 $ ("# Button '). Klik op (function () {



    



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



    



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



    



 $ Post ("dati.ext", {name: naam, voornaam: achternaam}.., Functie (MSG) {$ ("# result") Html (msg );});

Bij de post () methode die we hebben gepasseerd, in volgorde, de URL van de server-side script dat zal ontvangen en verwerken het verzoek, de gegevens opgehaald uit de vorm en de callback functie die de uitgang wordt afgedrukt.

• <<
• 1
• 2
• >>