jQuery: eseguire una chiamata ajax di un form

Prosegue il mio cammino alla scoperta di jQuery.
La prima cosa che mi ha stupito di questa libreria è la semplicità con cui posso effettuare chiamate in Ajax.
A differenza della classica definizione di uno script javascript per effettuare chiamate asincrone, jQuery mi consente, con pochissime righe di codice, di farlo in maniera pulita e veloce.
Solitamente includevo un file javascript per creare l’istanza del XMLHttpRequest. All’interno poi definivo un’altra funzione per il recupero dei dati da passare in POST o in GET ad una pagina .php in maniera asincrona.
Tutto questo mi portava via all’incirca un centinaio di righe di codice per un peso complessivo di 2Kb.

Con jQuery tutto questo posso farlo in una decina di righe pulite e senza problemi cross-browser.

Iniziamo con includere la libreria jQuery (scaricabile direttamente da http://jquery.com/)

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

La nostra pagina sarà costruita semplicemente così:

<form id="mio_form" name="mio_form" method="post">
   <input type="text" name="nome" id="nome" />
   <input type="text" name="email" id="email" />
 
   <input type="button" id="invia_form" value="Invia chiamata ajax" />
</form>
 
<div id="ajax_result"></div>

Come vedete c’è un div “ajax_result” dove stamperemo la risposta del server.

Il codice jQuery che si occuperà della chiamata Ajax sarà costruito così:

<script type="text/javascript">
   $(document).ready(function() {
      $("#invia_form").click(function(event){
         var email = $("input#email").val();
         var nome = $("input#nome").val();
 
         var dataString = 'nome='+ nome + '&amp;email=' + email;
 
      $.ajax({
         type: "POST",
         url: "ajax_result.php", //pagina che viene chiamata in ajax
         data: dataString,
         success: function(data) {
            $('#ajax_result').html(data);
      }
      });
   });
});
</script>

Creeremo poi una semplicissima pagina php “ajax_result.php” (a tal proposito: Il modello per iniziare una pagina Ajax) che si occuperà di inviare la richiesta al server. Un esempio semplicissimo:

<?php
   $nome = $_POST['nome'];
   $email = $_POST['email'];
 
   echo "Ho ricevuto ".$nome." e ".$email;
?>

Come vedete in 10 minuti abbiamo creato quello che, senza jQuery, ci avrebbe fatto perdere tempo prezioso e righe di codice inutili.

Ovviamente il precedente esempio ha bisogno di molte cose; in primis bisogna effettuare una validazione dei campi sia lato client che lato server… ma questo spetta a voi! :)

friimaind

Mi chiamo Massimiliano e sono uno sviluppatore web. Ho aperto questo blog principalmente come agenda dove tenere traccia di tutte le mie passioni :)

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *