Hvordan Sett et kontaktskjema på en Ajax Box

November 30

Plassere et kontaktskjema inne i en AJAX-boksen er en av de enkleste prosjekter du kan lage ved hjelp av AJAX verktøy. Det kan også utføres uten at det påvirker hele siden der kontaktskjema er plassert. AJAX er kjent for sin solide integrasjon med mangfoldige Web miljøer, så det ikke overraskende å se det brukes selv med enkle prosjekter, som å opprette et skjema.

Bruksanvisning

1 Kopier koden under for å lage PHP-delen for AJAX Kontakt Box og lagre det som ProcessAjaxContactBox.php eller med andre filnavn så lenge det ender med php:

<? Php

/ *

Ajax Kontakt Box, PHP handler

versjon 1.0

19 april 2010

Will Bontrager

http://www.willmaster.com/

Bontrager Connection, LLC gir deg

en royaltyfri lisens til å bruke eller endre

denne programvaren som følger denne kunngjøringen vises

på alle kopier. Denne programvaren leveres

"SOM DEN ER", uten noen form for garanti.

* /

// To steder å tilpasse

// Place 1 -

// Angi addy postadresse for å sende meldingen til.

$ EmailAddress = "[email protected]";

// Place to -

// Angi emnefeltet for Addy.

$ EmailSubject = "Ajax Kontakt Box Message";

// Ingen videre tilpasning kreves.

if (count ($ _ POST))

{

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

$ Overskrifter = array ();

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

$ overskrifter [] = "Fra:".. @ $ _ POST [ 'navn'] ' "<".. @ $ _ POST [' addy ']'> ';

$ Message = 'Navn: @ $ _ POST [' name '] "..

E-post ". @ $ _ POST [ 'addy']. '

Beskjed:'.'

". @ $ _ POST [ 'melding']. '

Web Page URL: '. @ $ _ POST [' URL '].'

IP-adresse: ". $ _ SERVER [ 'REMOTE_ADDR'];

if (mail ($ EmailAddress, $ EmailSubject, $ melding, implodere ( "\ r \ n", $ overskrifter))) {echo 'Message ble akseptert for levering.'; }

else {echo 'Kan ikke levere meldingen.'; }

}

else {echo 'Ingen data mottatt.'; }

2 Oppdater de to avsnittene nedenfor, som begge er merket i PHP-kildekoden:

$ EmailAddress --- Angi e-postadressen Ajax kontaktboks meldinger skal sendes til. For eksempel "[email protected]"

$ EmailSubject --- Angi emnefeltet meldingen epost skal ha. For eksempel, "Denne meldingen er for deg."

Last opp PHP-filen til serveren din og skrive ned nettadressen. Du bør få et svar som sier "Ingen data mottatt" når filen er lastet. Du trenger ikke å bekymre deg fordi dette vil fungere når alle de andre komponentene i manuset er oppdatert.

3 Opprett Javascript-fil ved å publisere og lagre kildekoden under:

/ *

Ajax Kontakt Box, Javascript handler

versjon 1.0

19 april 2010

Will Bontrager

http://www.willmaster.com/

Bontrager Connection, LLC gir deg

en royaltyfri lisens til å bruke eller endre

denne programvaren som følger denne kunngjøringen vises

på alle kopier. Denne programvaren leveres

"SOM DEN ER", uten noen form for garanti.

* /

// Ett sted å tilpasse.

// Angi URI til PHP kontaktboksen prosessor.

// The URI er webadressen minus domenenavnet.

// Eksempel: URL http://example.com/ProcessAjaxContactBox.php

// Er: URI /ProcessAjaxContactBox.php

Var PHPhandlerURI = "/ProcessAjaxContactBox.php";

// Ingen videre tilpasning kreves.

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

fm + = '<f' + 'eller' + 'm style = "margin: 0;" ONSu '+' bmit = "return false;"> ';

fm + = '<div> <i "+" sette ty' + 'pe = "text" id = "acb_Name" style = "width: 200px; padding-left: 3px;" onclick = "if (this.value == \ 'navn \') {this.value = \ '\'}" value = "Navn"> </ div> ';

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

fm + = '<div> <tex' + 'tarea id = "acb_Message" style = "width: 200px; height: 100px; padding: 3px;" onclick = "if (this.value == \ 'Message \') {this.value = \ '\'}"> Melding </ tex '+' tarea> </ div> ';

fm + = '<i "+" sette ty' + 'pe = "button" style = "width: 200px; margin-top: 3px;" onclick = "acb_ProcessAjaxContactBox ()" value = "Send melding"> ';

fm + = '</ f' + 'eller' + 'm>';

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

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

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

document.write ( '');

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

... Denne delen av skriptet er blitt avkortet fordi den overskrider tegngrensen for denne delen. Den komplette manuset er funnet på willmaster.com (se Ressurser).

</ Script>

4 Angi URI til PHP kontaktboksen prosessor, som er merket i kildekoden. Den URI er resten av URL uten domenenavn. Hvis nettadressen er http://example.com/box/ProcessAjaxContactBox.php, er da URI /box/ProcessAjaxContactBox.php.

For å gjøre dette arbeidet, må Javascript for å være til stede på hver side der AJAX kontakt merket. Det kan enten plasseres i hodet eller BODY området. Du kan også importere Javascript fra en ekstern fil.

5 Lag en lenke til å klikke en gang PHP-filen er på serveren og Javascript er på nettsiden. Dette er koden for det:

<Span id = "acb_pubaddy"> <a href="javascript:acb_DisplayContactBox()"> tekst eller bilde </a> </ span>

Plasser din egen tekst eller bilde som erstatning for "tekst eller bilde" i kildekoden til å klikke på. Ikke rør noe annet. Plasser koblingen på nettsiden, og den er klar for deg å bruke.

Hint

Guider for andre prosjekter er tilgjengelig gratis på nettet. Lær dem så mye du kan for å gjøre deg kjent grundig med AJAX.