Inviare moduli con AJAX

Uno dei vantaggi di ajax è la possibilità di inviare un modulo senza dover aggiornare la pagina in cui siete. Potete avere la risposta di una query senza nessun refresh o redirect, insomma, un notevole risparmio di tempo e di byte! Per inviare il vostro modulo usando questo metodo è sufficiente seguire pochi semplici passi.

1 - Per prima cosa includete la libreria jquey nell'header della vostra pagina:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

2 - Create il form html per l'invio dei dati

<form name="mio_form">
    Nome<input type="text" name="nome" id="nome"><br/>
    Cognome<input type="text" name="cognome" id="cognome"><br/>
    <input type="button" id="bottone" value="Invia">
</form>
<div id="ris"></div>

3 - Create lo script JS

<script type="text/javascript">
$(document).ready(function() {
  $("#bottone").click(function(){
    var nome = $("#nome").val();
    var cognome = $("#cognome").val();
    $.ajax({
      type: "POST",
      url: "backend.php",
      data: "nome=" + nome + "&cognome=" + cognome,
      dataType: "html",
      success: function(msg) {
        $("#ris").html(msg);
      },
      error: function() {
        $("#ris").html('<b style="color: red;">Si è verificato un errore!</b>');
      }
    });
  });
});
</script>

In questo modo recuperate, con il metodo ajax, le caratteristiche dell'invio: il metodo POST e la url del file server-side. Il valore di ritorno sarà in formato HTML. In fine stampiamo nel nostro div i risultati o eventuali errori.

4 - Il backend php

<?php
$nome = $_POST["nome"];
$cognome = $_POST["cognome"];
if ($nome == "" || $cognome == "") {
  echo "Inserire nome e cognome!";
} else {
  echo "Hai inserito i seguenti dati<br/>";
  echo "Nome: " . $nome;
  echo "Cognome: " . $cognome;
}

Questo è uno dei metodi per l'invio dei vostri moduli, una volta capito questo potete adattarlo alle vostre esigenze. Potrete creare pagine dinamiche a vostro piacere, ad esempio avrete la possibilità di creare una todo-list, o un guestbook, o addirittura una chat! Prossimamente pubblicherò dei post in cui vi spiegherò come fare un po' di queste cose :)