Submit a form with POST method with AJAX and jQuery

In a previous article we saw how to send a form with AJAX to send mail with ASP or PHP, using a simple JavaScript library used for the examples of the guide to AJAX centre-equestre-lepuy.com, as well as to many other items.

The library in question, very fast and lightweight, it uses the GET method for sending data, but when you send a form in the case of using the POST method for a simple reason: a querystring (the parameters that are passed in the URL through the GET method) have a limit of 255 characters including spaces, while the POST method does not suffer from this limitation.

In order to return very comfortable library jQuery , which has very comfortable to work with AJAX functions.

Let's take a simple example of sending data in a POST with AJAX, either by retrieving them via PHP ASP, whereas server-side script will simply print the screen data sent: to the reader the task of managing them according to your needs.

First recall the library jquery.js header of our web page:

 



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

 

We build the HTML form:

 <form name="modulo">



    



 <p> Name </ p>



    



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



    



 <p> Surname </ p>



    



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



    



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







 </ Form>









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

A simple form that contains two fields, a button and a screen printed layer on which the result of the operation.

Let us now analyze the Javascript code:

 <script type="text/javascript">







 $ (Document). Ready (function () {



  



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



    



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



    



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



    



 $. Ajax ({



      



 type: "POST",



      



 url: "dati.ext"



      



 dataType: "html",



      



 success: function (msg)



      



 {



        



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



      



 },



      



 error: function ()



      



 {



        



 alert ("Call failed, please try again ...");



      



 }



    



 });



  



 });







 });







 </ Script>

We recover, through the ajax method, the characteristics of transmission: the method (POST), the URL of the server side will handle the data (*), then specify that the return value will be in HTML format and finally print to video the confirmation message or any error in the call.

Note that jQuery also has an interesting shortcut to handle Ajax calls with the POST method:

 <script type="text/javascript">







 $ (Document). Ready (function () {



  



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



    



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



    



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



    



 $. Post ("dati.ext", {name: name, surname: surname}, function (msg) {$ ("# result"). Html (msg);});

At the post () method we have passed, in order, the URL of the server-side script that will receive and process the request, the data retrieved from the form and the callback function that will print the output.

• <<
• 1
• 2
• >>