Script ajax: Form method post e chiamata asincrona con ahah

   difficoltà:  script script script script script

Script simili
1/10/2007


Abbiamo visto nello script Script ajax: Esempio base ajax con ahah come realizzare una chiamata ajax tramite Ahah. L'invio dati avveniva via querystring, quindi con method get. In questo caso vedremo invece come effettuare una chiamata asincrona inviando i dati da un form via post.

Come nell'esempio precedente scarichiamo la libreria da qui. Una volta scaricata la libreria inseriamo il file nella cartella ahah.

Creiamo un semplice form con i classici dati: nome, cognome, città. Questo form avrà method POST e come action avremo una chiamate javascript. In particolare chiameremo la funzione:

completeAHAH.likeSubmit('ricevo.php', 'POST', 'formName', 'result');

dove ricevo.php  è il file a cui inviare i dati, POST è il metodo di invio dati, formName l'id del form e result l'id del div in cui visualizzare il risultato dell'invio.
Per essere più chiari vediamo il form, in particolare la pagina index.php:
<script type="text/javascript" src="ahah/ahahText.js"></script>
<form id="formName" action="javascript:completeAHAH.likeSubmit('ricevo.php', 'POST', 'formName', 'result');">
<div>nome*</div>
<div><input type="text" id="nome" name="nome" value=""></div>

<div>cognome*</div>
<div><input type="text" id="cognome" name="cognome" value=""></div>

<div>citta*</div>
<div><input type="text" id="citta" name="citta" value=""></div>

<div><input type="submit"</div>
</form>
<div id="result"></div>

Nel div result quindi verrà scritto quello che ritornerà a video la pagina ricevo.php. In questo file preleviamo i dati ricevuti dal form e controlliamo che siano riempiti. Se non sono compilati i campi obbligatori nel div result visualizzeremo l'errore, nel caso contrario potremo decidere di ringraziare l'utente, o tramite un javascript ridirigere l'utente a un'altra pagina, di ringraziamento.

Ecco un esempio di pagina ricevo.php:
<?
if(!isset($_POST['nome'])){$nome="";}else{$nome = $_POST['nome'];}
if(!isset($_POST['cognome'])){$cognome="";}else{$cognome = $_POST['cognome'];}
if(!isset($_POST['citta'])){$citta="";}else{$citta = $_POST['citta'];}

if($nome=="" ||$cognome=="" || $citta==""){
echo "compilare tutti i campi";
}else{
echo "Operazione eseguita con successo";
echo "<script>window.setTimeout(\"location.href=('ok.php')\",0);</script>";
}
?>

Nel caso l'operazione vada a buon fine nel div result verrà scritto il codice javascript, ed eseguito il redirect verso la pagina ok.php in cui potremo semplicemente scrivere: 'Operazione eseguita con successo.'




Commenti


  Davide

18/4/2009 15:34:12

ciao, grazie per l'utilissima guida. Sto provando ad implementarla e ho qualche difficoltà quando uso chiamate multiple della funzione completeAHAH.ahah: la prima dell'esempio, se usata da sola funziona, altrimenti invece non aggiorna il div con i risultati (le due funzioni lavorano su div dversi)

completeAHAH.ahah('script.php', 'head', '', 'POST', parametri);

for (i in splitted)
{
completeAHAH.ahah('script.php', 'result', '', 'POST', (parametri+splitted[i]));
// inoltre qui vorrei che si fermasse e attendesse che il DIV fosse aggiornato, per poi proseguire con la prossima splitted[i].

è possibile?

grazie
}
}

  Sergejpinka

30/11/2009 17:14:36

La guida è incompleta: se i dati inseriti sono già presenti nel database?



Lascia un commento


Codice di controllo*:
Nome*:
Email/Link:
Testo*:
 
I campi contrassegnati con * sono obbligatori.