Realizzare un Form con AJAX e PHP in maniera Semplice
In questo Breve, ma efficace esempio di Script AJAX vedremo come grazie ad AJAX e PHP un Programmatore PHP potrà realizzare il proprio Form dinamico che in tempo reale verifica l'esistenza di uno username, e vedremo come questo esempio sarà facilmente adattabile e ampliabile secondo le esigenze del Programmatore.
In questo articolo diamo per scontato che il Programmatore PHP conosca le basi di AJAX cioè la creazione dell'oggetto XMLhttpRequest e la gestione degli stati delle richieste AJAX che abbiamo visto già nei miei precedenti articoli.
Detto questo ci concentreremo sulle nuove nozioni, in questo esempio infatti ho voluto sperimentare il formato di interscambio JSON diverso da quello XML che sono solito utilizzare come Programmatore PHP AJAX, il formato JSON che grazie ad un abbinamento di chiave/valore consente lo scambio di dati in maniera semplice come vedremo più avanti.
Supponiamo dunque di avere una Form costituito da un campo username nel seguente modo, con un div messaggio inizialmente vuoto dove tramite Javascript andremo a scrivere in maniera asincrona il responso del nostro database MySQL:
<input type="text" id="username" name="username" />
<input type="button" value="Controlla Disponibilita'" onclick="controllaEsistenza();"/>
<div id="messaggio"> </div>
<input type="button" value="Controlla Disponibilita'" onclick="controllaEsistenza();"/>
<div id="messaggio"> </div>
Nello stesso file andremo a realizzare lo Script AJAX, supponiamo infatti di aver creato l'oggetto XMLhttpRequest e settato la gestione dello stato readyState==4 andremo quindi a gestire con Javascript la richiesta AJAX e la lettura dello JSON:
function controllaEsistenza()
{
root_sito = '';
var testo = document.getElementById('username');
var messaggio = document.getElementById('messaggio');
user = testo.value;
codice = '';
msg = '';
oggettoAJAX=creaRichiestaAjax();
oggettoAJAX.onreadystatechange=function()
{
if(oggettoAJAX.readyState==4)
{
eval("result = "+oggettoAJAX.responseText);
codice = result['codice'];
msg = result['result'];
if(codice <=0){
testo.style.border = "1px solid red";
messaggio.style.color = "red";
}
else{
testo.style.border = "1px solid green";
messaggio.style.color = "green";
}
messaggio.innerHTML = msg;
}
}
oggettoAJAX.open("GET",root_sito+"controlla.php?username="+user,true);
oggettoAJAX.send(null);
}
{
root_sito = '';
var testo = document.getElementById('username');
var messaggio = document.getElementById('messaggio');
user = testo.value;
codice = '';
msg = '';
oggettoAJAX=creaRichiestaAjax();
oggettoAJAX.onreadystatechange=function()
{
if(oggettoAJAX.readyState==4)
{
eval("result = "+oggettoAJAX.responseText);
codice = result['codice'];
msg = result['result'];
if(codice <=0){
testo.style.border = "1px solid red";
messaggio.style.color = "red";
}
else{
testo.style.border = "1px solid green";
messaggio.style.color = "green";
}
messaggio.innerHTML = msg;
}
}
oggettoAJAX.open("GET",root_sito+"controlla.php?username="+user,true);
oggettoAJAX.send(null);
}
Adesso ogni qual volta inseriremo il valore e cliccheremo su verifica username il nostro Javascript chiamerò il file controlla.php che si occuperà di effettuare una Query in maniera Asincrona al database MySQL e che sarà composto nel seguente modo:
<?php
//Controlli sullo username per eliminare caratteri speciali
$username = strip_tags(trim($_REQUEST['username']));
//Se la lunghezza della username è minore di 8 creo l'interscambio JSON che comunica l'errore
if(strlen($username) <= 7){
echo json_encode(array('codice' => -1, 'result' => 'Username non valido, inserisci almeno 8 caratteri.'));
die;
}
// Inserisci la query che controlla nel database
/*.........*/
if($available){
echo json_encode(array('codice' => 1, 'result' => "Username disponibile"));
die;
}else{
echo json_encode(array('codice' => 0, 'result' => "Username già utilizzato"));
die;
}
die;
?>
//Controlli sullo username per eliminare caratteri speciali
$username = strip_tags(trim($_REQUEST['username']));
//Se la lunghezza della username è minore di 8 creo l'interscambio JSON che comunica l'errore
if(strlen($username) <= 7){
echo json_encode(array('codice' => -1, 'result' => 'Username non valido, inserisci almeno 8 caratteri.'));
die;
}
// Inserisci la query che controlla nel database
/*.........*/
if($available){
echo json_encode(array('codice' => 1, 'result' => "Username disponibile"));
die;
}else{
echo json_encode(array('codice' => 0, 'result' => "Username già utilizzato"));
die;
}
die;
?>
Questa porzione di codice omette tutto il lato di connessione al database per permettere al Programmatore PHP o Programmatore AJAX di adattare lo script ad ogni tipologia di database e/o diversa struttura dello stesso.
Come possiamo vedere JSON è molto semplice, si assegnano una coppia di valori, nel nostro caso codice e result che poi sono letti nel file che contiene il codice Javascript semplicemente utilizzando la funzione eval (eval("result = "+oggettoAJAX.responseText);) in modo da fornire una risposta a video sull'esistenza o meno dello username.
Per semplicità ho legato l'evento di controllo ad un bottone, ma in un form completo di più campi, il Programmatore PHP AJAX utilizzando la funzione onblur potrebbe legare l'evento di controllo appena si va a scrivere su un altro dei campi del modulo. Per vedere l'esempio di questo Form Clicca Qui
.Nessun commento Presente.
Tags:
| torna su
Hai letto gli altri articoli?
Qualche Settimana fa lavoravo ad un Progetto come Programmatore PHP che utilizzava le API di Google Maps e ho annotato sul sito una semplice funzione Javascript che permetteva di ricavare Latitudine e Longitudine da una Mappa Google.
Ovviamente quell'esempio mostrava un modo pratico e veloce per conoscere le coordinate di un punto, mentre oggi ho voluto realizzare con AJAX un piccolo Script / Tool che permette di Trasformare un Indirizzo in Coordinate Latitudine e Longitudine con AJAX e Geocoding, tutto grazie alla fu...Leggi Tutto
In questo esempio come Programmatore PHP e Programmatore AJAX mostrerò le potenzialità di uno Script AJAX che interagendo con un database MySQL e PHP può Leggere i Feed RSS con AJAX e PHP.
Abbiamo già precedentemente trattato in un articolo come Programmatore AJAX le XMLHttpRequest ecco perchè ci soffermeremo sulla parte che il Programmatore PHP deve comprendere al fine di realizzare un lettore di XML in AJAX che sia in grado di leggere i FeedRSS.
Lo script dovrà essere composto da...Leggi TuttoCome Programmatore PHP MySQL AJAX sono sempre stato attento all'Ottimizzazione di Siti Internet e di Applicazioni Web al fine di supportare attività di Marketing, Promozione e Visibilità che possano rendere un progetto vincente. Nessuna delle attività potrebbe essere sviluppata e supportata senza un costante e intelligente utilizzo delle Google Analytics le statistiche di Google, che consultate nel giusto modo permettono la profilazione dei propri visitatori ed essere decisive nella decisione delle stra...Leggi Tutto
In questo Breve, ma efficace esempio di Script AJAX vedremo come grazie ad AJAX e PHP un Programmatore PHP potrà realizzare il proprio Form dinamico che in tempo reale verifica l'esistenza di uno username, e vedremo come questo esempio sarà facilmente adattabile e ampliabile secondo le esigenze del Programmatore.
In questo articolo diamo per scontato che il Programmatore PHP conosca le basi di AJAX cioè la creazione dell'oggetto XMLhttpRequest e la gestione degli stati delle richieste AJAX ch...Leggi Tutto
Come promesso in alcuni dei precedenti post, vi propongo un piccolo esempio per chi vuole iniziare a comprendere questi costrutti e magari in futuro diventare in futuro un buon Programmatore AJAX.
Alcuni Cenni Teorici
AJAX è una tecnica programmativa che consente richieste asincrone tra browser e server, e che consente aggiornamenti di porzioni di pagine e di interi elementi senza dover aggiornare l'intera pagina.
Per poter capire a pieno il funzionamento asincrono delle richieste utilizzeremo un esempio visivo ...Leggi Tutto
In questo Articolo presenterò un brevissimo ma efficacissimo esempio di realizzazione di uno script AJAX e PHP con un interazione con database MySQL tecnologie utili ad un Programmatore PHP per la realizzazione di siti dinamici.
Con quest'esempio simuleremo la selezione di una scheda di un dipendente all'interno di un database MySQL, tali dati verranno estrapolati utilizzando PHP e ovviamente un Programmatore PHP potrà ampliare o sfruttare tale script per la realizzazione di elementi ben più complessi.
...Leggi Tutto
:
:
:
Vuoi Sviluppare l'Applicazione Mobile (WebApps) del tuo sito o della tua attività? un Applicazione Web, o pianificare la Realizzazione Sito Mobile? Contattami e scegli un Programmatore di WebApps Mobile e Programmatore di Siti Internet Mobile! Sviluppo WebApps per iPhone e Android
- [php] Social Plugin: Integrare Foursquare nel Proprio Sito Internet
- [jS] JQuery e Javascript per lo Sviluppo di Siti Internet: Quando e Come?
- [php] Utilizzare le API Google Maps per la Realizzazione Siti Internet Dinamici
- [consulenza] Perchè Creare una Pagina Facebook per la tua Azienda
- [iPhone] Realizzazione Siti Internet Mobile: Ecco qualche consiglio!
- [consulenza] MiniSito Facebook: Creare una Pagina Facebook efficace e di successo.
- [php] Integrare Twitter nel Proprio Sito
- [iPhone] Realizzazione Siti Internet Mobile, Siti Internet per iPhone e Android
- [php] Inserire i commenti di una Bacheca Facebook sul tuo sito
- [consulenza] Programmatore HTML 5: Semplice Guida alle SessionStorage
- [consulenza] Consulenza Web Marketing? No, Viaggio ad Amsterdam
- [php] ADServer Banner a Rotazione
- [jS] Realizzare CountDown in stile Groupon con JQuery
- [consulenza] Scegliere un Programmatore Freelance
- [php] Inserire il Meteo di Google nel tuo Sito
- [php] Applicazione Flickr per l'Upload di Foto dal tuo Sito
- [consulenza] Integrare una Fotogallery Flickr nel Proprio Sito
- [php] Leggere un file XML usando PHP e le funzioni DOM
- [php] Leggere JSON utilizzando PHP
- [php] Aggiungere il Meteo al tuo sito con Yahoo e PHP
- [consulenza] Programmatore HTML5 e LocalStorage
- [jS] Realizzare un Drag e Drop con Javascript
- [php] Arrotondare una Cifra a 2 decimali Aggiungendo gli Zeri con PHP
- [php] Creare e Inserire Grafici in una Pagina Web con PHP
- [aJax] Realizzare un Form con AJAX e PHP in maniera Semplice
- [aJax] Trasformare un Indirizzo in Coordinate Latitudine e Longitudine con AJAX e Geocoding
- [php] Generare un QRCode con PHP e le API Google Chart
- [consulenza] Interessanti Spunti dalla BTO2010 per gli Sviluppatori Web
- [consulenza] Crea il tuo Gestionale Online o Applicazione Web con PHP e MySQL
- [mySQL] Backup di un Database MySQL utilizzando PHP
Cerchi un Programmatore PHP con esperienza consolidata? Molte aziende a Napoli, Milano, Roma si sono affidate a me. Contattami per una Consulenza Gratuita, per Realizzare un Applicazione Web o Sviluppare Siti Internet, Creare Portali Dinamici, Realizzare Siti su Misura, o come Consulente Web Marketing, Consulente SEO o per la Realizzazione Siti Mobile
