In questo articolo vedremo come utilizzare la libreria jQuery, che dispone di comodissime funzioni per lavorare con AJAX e semplificare le operazioni con il DOM. Nello specifico vedremo come effettuare il submit di un form inviando dati col metodo POST via Ajax ad un’applicazione web.
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 progettuali.
Per prima cosa richiamiamo la libreria jquery.js nell’header della nostra pagina Web:
<script type="text/javascript" src="jquery.js"></script>Costruiamo ora 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>Abbiamo creato un semplicissimo modulo che contiene due campi di input, un bottone per inviare i dati e un layer in cui verrà stampato a video il risultato dell’operazione.
Analizziamo adesso il codice Javascript per gestire il form:
<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>Nel codice sopra 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 infine stampiamo a video il messaggio di conferma o di eventuale errore nella chiamata. È importante gestire gli errori per migliorare l’esperienza utente.
Si noti che jQuery dispone anche di un’interessante shortcut per gestire le chiamate Ajax col metodo POST in modo più conciso:
<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);
});
});
});
</script>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. Questo approccio rende il codice più chiaro e diretto.
(*) Seguono ora gli esempi di codice ASP e PHP: nel codice Javascript cambieremo quindi la URL dati.ext con dati.asp piuttosto che con dati.php.
Iniziamo col codice ASP:
<%@LANGUAGE = VBScript%>
<%
Dim nome, cognome
nome = Request.Form("nome")
cognome = Request.Form("cognome")
If nome = "" Or cognome = "" Then
Response.Write "Inserire nome e cognome!"
Else
Response.Write nome & " " & cognome
End If
%>Il codice ASP recupera i dati, verifica la compilazione del form e quindi li stampa a video. È fondamentale fornire feedback all’utente riguardo ai dati inseriti.
L’esempio PHP è una semplice traduzione del codice ASP:
<?PHP
$nome = $_POST["nome"];
$cognome = $_POST["cognome"];
if ($nome == "" || $cognome == "")
{
echo "Inserire nome e cognome!";
}
else
{
echo $nome . " " . $cognome;
}
?>In conclusione, possiamo notare quanto – grazie a jQuery – questo procedimento sia davvero semplice e non necessiti di particolari ulteriori spiegazioni. L’uso di AJAX per l’invio di moduli non solo migliora l’esperienza utente rendendo le operazioni più fluide, ma permette anche di gestire dati in modo più sicuro e strutturato.
