Inviare un form col metodo POST con AJAX e jQuery
Pagina 1 di 2
In un precedente articolo abbiamo visto come inviare un form con AJAX al fine di inviare una mail con ASP o con PHP, utilizzando la semplice libreria Javascript utilizzata per gli esempi della guida ad AJAX di Mr.Webmaster, nonchè di tantissimi altri articoli.
La libreria in oggetto, molto veloce e leggera, utilizza il metodo GET per l'invio dei dati, ma quando si invia un form è il caso di utilizzare il metodo POST per un semplice motivo: una querystring (i parametri che vengono passati nella URL attraverso il metodo GET) hanno un limite di 255 caratteri spazi inclusi, mentre il metodo POST non soffre di questo limite.
Allo scopo torna molto comoda la libreria jQuery che dispone di comodissime funzioni per lavorare con AJAX.
Facciamo un semplice esempio di invio dei dati in POST con AJAX, recuperandoli sia via ASP che via PHP, considerando che gli script lato server si limiteranno a stampare a video i dati inviati: al lettore il compito di gestirli a seconda delle proprie esigenze.
Per prima cosa richiamiamo la libreria jquery.js nell'header della nostra pagina Web:
<script type="text/javascript" src="jquery.js"></script>Costruiamo il form HTML:
<form name="modulo">
<p>Nome</p>
<p><input type="text" name="nome" id="nome=></p>
<p>Cognome</p>
<p><input type="text" name="cognome" id="cognome"></p>
<input type="button" id="bottone" value="Invia i dati">
</form>
<div id="risultato"></div>
Un semplicissimo modulo che contiene due campi, un bottone ed un layer in cui stampare a video il risultato dell'operazione.
Analizziamo adesso il codice Javascript:
<script type="text/javascript">
$(document).ready(function() {
$("#bottone").click(function(){
var nome = $("#nome").val();
var cognome = $("#cognome").val();
$.ajax({
type: "POST",
url: "dati.ext",
data: "nome=" + nome + "&cognome=" + cognome,
dataType: "html",
success: function(msg)
{
$("#risultato").html(msg);
},
error: function()
{
alert("Chiamata fallita, si prega di riprovare...");
}
});
});
});
</script>
Recuperiamo, attraverso il metodo ajax, le caratteristiche dell'invio: il metodo (POST), la URL del file lato server che gestirà i dati (*), quindi specifichiamo che il valore di ritorno sarà in formato HTML ed in fine stampiamo a video il messaggio di conferma o di eventuale errore nella chiamata.
Si noti che jQuery dispone anche di un'interessante shortcut per gestire le chiamate Ajax col metodo POST:
<script type="text/javascript">
$(document).ready(function() {
$("#bottone").click(function(){
var nome = $("#nome").val();
var cognome = $("#cognome").val();
$.post("dati.ext", { nome: nome, cognome: cognome }, function(msg){ $("#risultato").html(msg); });
Al metodo post() abbiamo passato, nell'ordine, la URL dello script lato server che riceverà ed elaborerà la richiesta, i dati recuperati dal form e la funzione di callback che stamperà l'output.
