Posizionare un modulo di contatto all'interno di una scatola di AJAX è uno dei progetti più semplici che è possibile creare utilizzando strumenti AJAX. Può anche essere eseguito senza influenzare l'intera pagina in cui è posizionato il tuo modulo di contatto. AJAX è noto per la sua solida integrazione con molteplici ambienti Web, così non è sorprendente vederlo utilizzato anche con progetti semplici, quali la creazione di un form.
Istruzioni
1
Copiare il codice seguente per creare la parte PHP per la casella di contatto AJAX e salvarlo come ProcessAjaxContactBox.php o con qualsiasi altro nome di file, purché si conclude con. php:
<? php
/*
Casella di contatto Ajax, gestore PHP
Versione 1.0
19 aprile 2010
Will Bontrager
http://www.willmaster.com/
Copyright 2010 Bontrager Connection, LLC
Connessione di Bontrager, LLC concede all'utente
licenza royalty free per utilizzare o modificare
Questo software fornito che questo avviso viene visualizzato
su tutte le copie. Questo software viene fornito
"Così com'è," senza garanzia di alcun tipo.
*/
Due posti per personalizzare
Posto 1-
Specificare indirizzo addy per inviare il messaggio a.
$EmailAddress = "di [email protected]";
Posto 2-
Specificare la riga dell'oggetto per il addy.
$EmailSubject = "Ajax contatto casella messaggio";
//
Nessun ulteriore personalizzazione necessaria.
Se (count($_POST))
{
foreach ($ post come $k = > $v) {$ Post [$k] = stripslashes($v);}
$headers = Array ();
$headers [] = ' content-type: text/plain; charset = "UTF-8" ';
$headers [] = "da:"'. @$ post ['nome'].'"<'. @$ post ['addy'].' >';
$message = ' nome: '. @$ post ['nome'].'
E-mail: '. @$ post ['addy'].'
Messaggio:'. '
'. @$ Post ['messaggio'].'
URL della pagina Web: '. @$ post ['URL'].'
Indirizzo IP: '. $ Server ['REMOTE_ADDR'];
Se (mail($EmailAddress,$EmailSubject,$message,implode("\r\n",$headers))) {echo "Messaggio è stato accettato per la consegna.";}
else {echo "Impossibile recapitare il messaggio.";}
}
else {echo "Nessun dato ricevuto.";}
? >
2
Aggiornare le due sezioni qui sotto, che sono entrambi segnate nel codice sorgente PHP:
$EmailAddress---specifica l'indirizzo di posta elettronica cui Ajax contatto con i messaggi di essere trasmessa al. Ad esempio, su "[email protected]"
$EmailSubject---avrà specificare la riga dell'oggetto del messaggio e-mail. Ad esempio, "questo messaggio è per voi".
Caricare il file PHP sul vostro server e annotare l'URL. Si dovrebbe ottenere una risposta che dice: "Nessun dato ricevuto" una volta che il file viene caricato. Non c'è bisogno di preoccuparsi perché questo funzionerà quando tutti gli altri componenti dello script vengono aggiornati.
3
Creare il file JavaScript di distacco e salvare il codice riportato di seguito:
< script type = "text/javascript" >
/*
Casella di contatto Ajax, gestore JavaScript
Versione 1.0
19 aprile 2010
Will Bontrager
http://www.willmaster.com/
Copyright 2010 Bontrager Connection, LLC
Connessione di Bontrager, LLC concede all'utente
licenza royalty free per utilizzare o modificare
Questo software fornito che questo avviso viene visualizzato
su tutte le copie. Questo software viene fornito
"Così com'è," senza garanzia di alcun tipo.
*/
Un posto da personalizzare.
Specificare l'URI per il processore di contatto casella PHP.
L'URI è l'URL meno il nome di dominio.
Esempio: URL http://example.com/ProcessAjaxContactBox.php
è: URI /ProcessAjaxContactBox.php
var PHPhandlerURI = "/ ProcessAjaxContactBox.php";
//
Nessun ulteriore personalizzazione necessaria.
fm var = ' < div style = "font-size: 10px; font-weight: bold; lettera-spaziatura: 2px; font-family: verdana, sans-serif; text-align: center; " >< un href="javascript:acb_HideContactBox()" > [Nascondi FO RM '+'] < /a >< / div >';
FM + = ' < f'+ 'o' +'m style = "margin: 0;" onsu bmit '+' = "return false;" >';
FM + = ' < div >< in ty messo '+' '+' pe = "testo" id = "acb_Name" style = "width: 200px; padding-left: 3px; "onclick="if(this.value==\'Name\') {questo. value = \'\ '} "valore ="Nome">< / div >';
FM + = ' < div style = "margin-top: 3px; margin-bottom: 3px; " >< in ty messo '+' '+' pe = "testo" id = "acb_Addy" style = "width: 200px; padding-left: 3px; "onclick="if(this.value==\'Em'+'ail\') {questo. value = \'\ '} "valore =" Em '+' ail ">< / div >';
FM + = ' < div >< tex '+' tarea id = "acb_Message" style = "width: 200px; Height: 100px; padding: 3px;"onclick="if(this.value==\'Message\') {questo. value = \'\ '} "> messaggio < / tex tarea '+' >< / div >';
FM + = ' < in '+' ty messo pe '+' = "pulsante" style = "width: 200px; margin-top: 3px; "onclick="acb_ProcessAjaxContactBox() "value ="Invia messaggio">";
FM + = ' < / f'+ 'o' +'m >';
Document. Write ('< div id = "acb_box" style = "display: none; posizione: absolute; top: -300; sinistra: -300; background-color: white; width: 270px; margin: 0;" >');
Document. Write ('< div style = "border: 1px solid black; margine: 25px;" >');
Document. Write ('< div id = "acb_messageBox" style = "margin: 0 10px 10px 10px;" >');
Document.Write(' ');
Document. Write (' </div >');
Document. Write (' </div >');
Document. Write (' </div >');
... Questa porzione dello script è stata troncata perché supera il limite di caratteri per questa sezione. Lo script completo è disponibile presso willmaster.com (Vedi risorse).
< / script >
4
Specificare l'URI per il processore di contatto casella PHP, che è segnato nel codice sorgente. L'URI è il resto dell'URL senza il nome di dominio. Se l'URL è http://example.com/box/ProcessAjaxContactBox.php, l'URI è /box/ProcessAjaxContactBox.php.
Per fare questo lavoro, il codice JavaScript deve essere presente su ogni pagina dove si trova la casella di contatto AJAX. Esso può essere collocato in testa o la zona del corpo. È inoltre possibile importare codice JavaScript da un file esterno.
5
Creare un link da cliccare una volta che il file PHP è sul server ed è il codice JavaScript nella pagina web. Questo è il codice per esso:
< span id = "acb_pubaddy" >< un href="javascript:acb_DisplayContactBox()" > YOUR TEXT o IMAGE < /a >< / span >
Inserire il proprio testo o immagine come sostituto per "YOUR TEXT OR IMAGE" nel codice sorgente fare clic su. Non toccare nient'altro. Situare il link sulla pagina web ed è pronto per l'utilizzo.
Consigli & Avvertenze
- Tutorial per altri progetti sono disponibili online gratuitamente. Imparare loro quanto più possibile per leggetevi con AJAX.