menu


area contatti

area directory PRODOTTI



Torna Indietro
GUIDA JQUERY (TUTORIAL) 14. INVIARE E RICEVERE DATI SENZA RICARICARE LA PAGINA(JSON)
13-06
./upload/13-06-2017-16-49-43.jpg

foto-1
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


Curtacci.Info Programmatore Php Java C# Javascript Css Mysql Html

() ITALIA


italiano english version francese version spagnolo version



Privacy and Policy




youtube instagram facebook feed rss

Programmatore web - Webmaster Elio Curtacci

Made with made in italy in Italy

Questo sito web utilizza i COOKIE per dare all'utente un esperienza di visita migliore.
OK
INFORMAZIONI