back to top

Inviare un form col metodo POST con AJAX e jQuery

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.

(*) Seguono gli esempi di codice ASP e PHP: nel codice Javascrpt 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
%>

Recupera i dati, verifica la compilazione del form, quindi li stampa a video.

L’esempio PHP è la mera 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 necessita di particolari ulteriori spiegazioni.

Altri contenuti interessanti

Pubblicitร 

Leggi anche...

Il file manifest.json: cos’รจ e a cosa serve

Il file manifest.json รจ un componente chiave nelle applicazioni web moderne,...

Infinite scroll, come programmarlo su AMP e su Web con Javascript

L'infinite scroll è una tecnica di design e navigazione...

Codice Fiscale: 5 javascript per la verifica e il calcolo

Il codice fiscale รจ un identificativo tributario univoco che...

Math.ceil() – Arrotondare per eccesso con Javascript

Il metodo ceil() dell'oggetto Math di Javascript è utilizzato...

Minificare Javascript: librerie e strumenti online per comprimere il sorgente JS

La minificazione è un processo abbastanza diffuso nell'implementazione delle...

Javascript: svuotare un campo input o una textarea con un click

Quando si fornisce agli utenti un modulo per l'inserimento...
Pubblicitร