Come mettere un modulo di contatto in una scatola Ajax

August 25

Come mettere un modulo di contatto in una scatola Ajax


Posizionamento di un modulo di contatto all'interno di una scatola di AJAX è uno dei progetti più semplici si possono creare utilizzando gli strumenti AJAX. Si può anche essere eseguita senza influenzare l'intera pagina in cui viene inserito il modulo di contatto. AJAX è noto per la sua solida integrazione con gli ambienti Web molteplici, quindi non sorprendente vedere che venga utilizzato anche con progetti semplici, come la creazione di un modulo.

istruzione

1 Copia il codice qui sotto per creare la porzione di PHP per l'AJAX Contact Box e salvarlo come ProcessAjaxContactBox.php o con qualsiasi altro nome di file fintanto che finisce con .php:

<? Php

/ *

Ajax Contact Box, gestore PHP

versione 1.0

19 Apr 2010

Will Bontrager

http://www.willmaster.com/

Copyright 2010 Bontrager Connessione, LLC

Bontrager Connessione, LLC concede

una licenza royalty free di utilizzare o modificare

questo software condizione che questa nota appare

su tutte le copie. Questo software è fornito

"COME SONO", senza garanzia di alcun tipo.

* /

// Due posti per personalizzare

// Luogo 1 -

// Specifica l'indirizzo Addy per inviare un messaggio a.

$ EmailAddress = "[email protected]";

// Place 2 -

// Specificare la linea di oggetto per il Addy.

$ EmailSubject = "Ajax Contatto finestra di messaggio";

//

// Nessun ulteriore personalizzazione richiesto.

if (count ($ _ POST))

{

foreach ($ _POST da $ k => $ v) {$ _POST [$ k] = stripslashes ($ v); }

$ Headers = array ();

$ headers [] = 'Content-type: text / plain; charset = "UTF-8" ';

$ headers [] = 'Da: "'.. @ $ _ POST [ 'name'] '" <'.. @ $ _ POST [ 'Addy'] '>';

$ Messaggio = 'Nome:' @ $ _ POST [ 'name'] '..

E-mail: '. @ $ _ POST [' Addy '].'

Messaggio:'.'

'. @ $ _ POST [' messaggio '].'

URL della pagina web: '. @ $ _ POST [' URL '].'

Indirizzo IP: '. $ _ SERVER [' REMOTE_ADDR '];

if (posta ($ EmailAddress, $ EmailSubject, $ messaggio, implodere ( "\ r \ n", $ intestazioni))) {echo 'Messaggio è stato accettato per la consegna.'; }

else {echo 'Impossibile recapitare il messaggio.'; }

}

else {echo 'Non ci sono dati ricevuti.'; }

?>

2 Aggiornare le due sezioni che seguono, che sono entrambi contrassegnati nel codice sorgente PHP:

$ EmailAddress --- Specificare l'indirizzo di posta elettronica in cui i messaggi di dialogo Ajax a contatto devono essere inviate a. Ad esempio, "[email protected]"

$ EmailSubject --- specificare l'oggetto del messaggio e-mail deve avere. Ad esempio, "Questo messaggio è per te."

Carica il file PHP per il server e scrivere il suo URL. Si dovrebbe ottenere una risposta che dice: "No dati ricevuti" una volta che il file è stato caricato. Non c'è bisogno di preoccuparsi, perché questo funziona quando tutti gli altri componenti dello script vengono aggiornati.

3 Creare il file JavaScript inviando e salvando il codice sorgente di seguito:

<Script type = "text / javascript">

/ *

Ajax Contact Box, handler JavaScript

versione 1.0

19 Apr 2010

Will Bontrager

http://www.willmaster.com/

Copyright 2010 Bontrager Connessione, LLC

Bontrager Connessione, LLC concede

una licenza royalty free di utilizzare o modificare

questo software condizione che questa nota appare

su tutte le copie. Questo software è fornito

"COME SONO", senza garanzia di alcun tipo.

* /

// Un posto da personalizzare.

// Specifica l'URI al processore scatola contatto 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 richiesto.

var fm = '<div style = "font-size: 10px; font-weight: bold; letter-spacing: 2px; font-family: Verdana, sans-serif; text-align: center;"> <a href = " javascript: acb_HideContactBox () "> [hide FO '+' RM] </a> </ div> ';

FM + = '<f' + 'o' + 'm style = "margin: 0;" onsu '+' bmit = "return false;"> ';

FM + = '<div> <a' + 'messo ty' + 'pe = "text" id = stile "acb_Name" = "width: 200px; padding-left: 3px;" onclick = "if (this.value == \ 'Nome \') {this.value = \ '\'}" value = "Nome"> </ div> ';

FM + = '<div style = "margin-top: 3px; margin-bottom: 3px;"> <a' + 'messo ty' + 'pe = "text" id = stile "acb_Addy" = "width: 200px; padding-left: 3px; " onclick = "if (this.value == \ 'Em' + 'ail \') {this.value = \ '\'}" value = "Em ail '+'"> </ div> ';

FM + = '<div> <tex' + 'Tarea id = stile "acb_Message" = "width: 200px; height: 100px; padding: 3px;" onclick = "if (this.value == \ 'Message \') {this.value = \ '\'}"> Messaggio </ tex '+' Tarea> </ div> ';

FM + = '<a' + 'messo ty' + 'pe = "button" style = "width: 200px; margin-top: 3px;" onclick = "acb_ProcessAjaxContactBox ()" value = "Invia messaggio"> ';

FM + = '</ f' + 'o' + 'm>';

document.write ( '<div id = stile "acb_box" = "display: none; position: absolute; top: -300; sinistra: -300; background-color: white; width: 270px; margin: 0;">' );

document.write ( '<div style = "border: 1px solid nero; margin: 25px;">');

document.write ( '<div id = stile "acb_messageBox" = "margin: 0 10px 10px 10px;">');

document.write ( '');

document.write ( '</ div>');

document.write ( '</ div>');

document.write ( '</ div>');

... Questa porzione dello script è stato troncato perché supera il limite di caratteri per questa sezione. Lo script completo si trova al willmaster.com (vedi Risorse).

</ Script>

4 Specificare l'URI al processore scatola contatto PHP, che è segnato nel codice sorgente. L'URI è il resto della URL senza il nome del dominio. Se l'URL è http://example.com/box/ProcessAjaxContactBox.php, allora l'URI è /box/ProcessAjaxContactBox.php.

Per fare questo lavoro, il codice JavaScript deve essere presente in ogni pagina in cui la casella contatto AJAX è. Può essere posizionato sia in testa o la zona del corpo. È inoltre possibile importare il JavaScript da un file esterno.

5 Creare un link da cliccare una volta che il file PHP è sul server e il codice JavaScript è sulla pagina web. Questo è il codice per esso:

<Span id = "acb_pubaddy"> <a href="javascript:acb_DisplayContactBox()"> vostro testo o immagine </a> </ span>

Mettere il proprio testo o l'immagine come sostituto di "vostro testo o immagine" nel codice sorgente di fare clic su. Non toccare niente altro. Collocare il link sulla pagina web ed è pronto per l'uso.

Consigli e avvertenze

  • Tutorial per altri progetti sono disponibili online gratuitamente. Imparare loro il più possibile per familiarizzare a fondo con AJAX.