Hvordan lage og sende inn skjemaer med Ajax

Innholdsfortegnelse

Vi startet opplæringen for å få lage og sende inn skjemaer via Ajax, for dette når vi lager sider i HTML er det veldig enkelt lage former dataregistrering, enten for å tjene oss som Kontakt skjema med siden eller organisasjonen selv, for å gjennomføre en undersøkelse, for eksempel registrering, etc. Det normale er at hvis vi ønsker å lage dette skjemaet for noe enkelt, bruker vi PHP Post -metoden til å sende informasjonen og kunne se, behandle eller endre den.

Imidlertid har bruken av denne metoden i PHP en stor ulempe, at når vi legger inn data må vi oppdatere eller laste inn den aktuelle siden på nytt. Det er derfor vi kommer til å se en metode der det ikke er behov for det.

Jeg mener et skjema opprettet med Ajax, også hjulpet med PHP og opprettet for en side i HTML. Tydeligvis må vi lage siden vår i HTML, vår indeks, som vi kan tilpasse eller tilpasse med stiler takket være en CSS -fil.

Etter å ha opprettet den basen må vi lage ytterligere 2 filer, en php -fil der vi vil redigere datainndataene fra skjemaet og et skript implementert i javascript, det vil si en .js -fil. Det er i dette skriptet vi vil bruke Ajax til å behandle dataene på en slik måte at vi ikke trenger å laste inn siden vår på nytt, da det ville skje hvis vi bare brukte en php -metode som Post eller get.

i tillegg til dette Vi må inkludere et jQuery -bibliotek å kunne tolke det vi skriver med Ajax.

Til å begynne med er det viktig å huske at alle filene vi lager, vår Ajax javascript -fil som vi vil kalle operation.js, css stylesheet -filen som vi vil kalle styles.css, hvis vi skal lage en, og jQuery -biblioteket, må vi inkludere det i begynnelsen av HTML -koden.

Det er så enkelt som inkludere dem i hodet fra vår index.html:

Nå skal vi lage en fil med enkel php -kode som vi vil kalle envio.php hvor vi vil samle informasjonen som sendes gjennom nettsiden vår. I dette tilfellet vil informasjonen være for et kontaktskjema, så dataene vil bli sendt til vår egen e -postadresse for å kunne lese meldingene som er igjen av brukerne, selv om dette kan endres og sende det til en annen side eller et annet sted.
 
Etter å ha opprettet php -koden, la oss gå til den virkelig interessante tingen som er opprettelsen av vår operation.js -fil der vi skal bruke Ajax. På denne måten vil vi behandle dataene for kontaktskjemaet vårt uten å oppdatere siden som tidligere nevnt. Først viser vi koden vi må skrive i skriptet vårt:
 function sendMail () {$ ("# car_send"). attr ("deaktivert", sant); $ (". car_error"). fjerne (); var filter = / [A-Za-z] [A-Za-z0-9 _] * @ [A-Za-z0-9 _] +. [A-Za-z0-9 _.] + [A -za- z] $ /; var s_email = $ ('# c_mail'). val (); var s_name = $ ('# c_name'). val (); var s_msj = $ ('# c_msg'). val (); if (filter.test (s_email)) {sendMail = "true"; } annet {$ (‘# c_mail’). etter ("Skriv inn gyldig e -post."); sendMail = "false"; } if (s_name.length == 0) {$ (‘# c_name’). etter ("Skriv inn navnet ditt."); var sendMail = "false"; } hvis (s_msj.length == 0) {$ (‘# c_msg’). etter ("Skriv inn melding."); var sendMail = "false"; } if (sendMail == "true") {var data = {"name": $ ('# c_name'). val (), "email": $ ('# c_mail'). val (), "melding" : $ ('# c_msg'). val ()}; $ .ajax ({data: data, url: 'sending.php', type: 'post', beforeSend: function () {$ ("# car_send"). val ("Sender …");}, suksess : function (response) {$ ('form') [0] .reset (); $ ("# car_enviar"). val ("Send"); $ ("# c_information p"). html (respons); $ ("#c_information"). fadeIn ('slow'); $ (" # car_enviar"). removeAttr ("deaktivert");}}); } annet {$ ("# car_submit"). removeAttr ("deaktivert"); }} 
Vi oppretter filtervariabelen for å bekrefte at e -posten vi setter inn er gyldig, for dette setter vi at den angitte adressen er en sekvens av tegn etterfulgt av et at -symbol, en annen sekvens av tegn, en periode og flere tegn. Hvis den ikke har den strukturen når vi sender meldingen, vil den fortelle oss at den ikke kan sendes siden e -posten som er angitt ikke er gyldig. Hvis den oppfyller kravene, lagrer du verdien true i send -e -postvariabelen sendMail og fortsetter å sjekke.

Valider deretter lengden på navnet. Hvis det er lik 0, betyr det at vi ikke har angitt et navn, og det ber oss om å skrive det inn igjen.

Det gjør det samme med meldingen og lengden for å kontrollere at vi ikke har forlatt feltet tomt.

Etter å ha sjekket alle feltene og sett at de er riktige, lagrer du datavariabelen som er en matrise, navnet, e -posten og meldingen som skal sendes.

Til slutt, med Ajax, sender vi dataene og gjør det referanse til filen envio.php ved hjelp av postmetoden og vi sender informasjonen. Før den sendes, vises meldingen "sender" til prosessen avsluttes vellykket.

Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng

Du vil bidra til utvikling av området, dele siden med vennene dine

wave wave wave wave wave