Il grosso vantaggio nell’uso di JQuery è la semplicità di effettuare chiamate Ajax con poche righe di codice rispetto all’uso di codice nativo javascript.
Vediamo comè possibile fare chiamate Ajax attraverso JQuery con un semplice esempio stampando da una pagina php i parametri provenienti dal form HTML.
Per prima cosa abbiamo bisogno della libreria JQuery che possiamo scaricare qui.
Passiamo quindi a creare una semplice pagina HTML con un form di due campi: nome e cognome:
Analizziamo il codice partendo dalla linea 3 dove richiamiamo nel codice la libreria <strong>JQuery</strong>: [html] <script type="text/javascript" src="js/jquery.js"></script>
Poi subito dopo abbiamo la funzione inviaForm() che viene chiamata al click sul bottone “Invia”:
<script>
function inviaForm()
{
var nome=$("#name").val();
var cognome=$("#surname").val();
$.ajax({
type:'POST',
url:'ajax.php',
data:'nome='+nome+'&cognome='+cognome,
success: function(response){
$("#output").html(response);
}
});
}
</script>
E’ prorio qui che invochiamo il metodo $.ajax() che svolge la chiamata vera e propria e che ha i seguenti parametri:
- type: specifica se il tipo è GET oppure POST
- url: L’url della richesta, in questo caso ajax.php
- data:i dati da inviare
- success: In caso di successo viene invocata la funzione passata con la risposta da visualizzare.
Visualizziamo il risultato attraverso il div:
<div id="output" style="color:red"></div>
La pagina ajax.php è molto semplice e stampa i valori provenienti dal form:
<?php $nome=$_POST['nome']; $cognome=$_POST['cognome']; echo $nome." ".$cognome; ?>