GUIDA JQUERY (TUTORIAL) 14. INVIARE E RICEVERE DATI SENZA RICARICARE LA PAGINA(JSON)
|
I siti più dinamici ad oggi effettuano delle comunicazioni con il server in continuazione senza costringere il visitatore a continui refresh di pagina.
Il codice che vado a mostrare è molto semplice,
- prende i dati inseriti dal visitatore
- li analizza con Jquery senza ricaricare la pagina
- se i dati sono tutti compilati li passa ad un'altra pagina
- preleva quello che viene stampato nell'altra pagina e lo scrive in una div
Tutto questo senza neanche un refresh.
Nel Body della pagina index.html
Questo è semplicemente un modulo.
<FORM>
First name: <input type="text" id="nome" name="fname">
Last name: <input type="text" id="cognome" name="lname">
<input type=button id=bottone_sub value="PROSEGUI">
</FORM>
<div class="result">BOX DI RISPOSTA</div>
Nei tag script della pagina index.html
Questo script controlla che i campi siano compilati e nel caso li passa alla pagina risposta.html e stampa il risultato presente in risposta.html direttamente nella DIV result.
$ ("#bottone_sub").click(function(){
var errore_trovato=0;
if($("#nome").val()!=""){}else {alert("Manca Nome"); errore_trovato=1;}
if($("#cognome").val()!=""){}else {alert("Manca Cognome"); errore_trovato=1;}
if(errore_trovato==0)
{
$.get( "risposta.html", function( data ) {
$( ".result" ).html( data );
alert( "Caricamento OK." );
});
}
});
Nel Body della pagina risposta.html
Modulo Inviato!!
Ovvio che se questa fosse una pagina PHP o ASP potreste effettuare delle operazioni sui dati passati ed interrogare un DataBase prima di stampare una risposta.
Buon Web a tutti
Questo sito web utilizza i COOKIE per dare all'utente un'esperienza di visita migliore.