Sådan oprettes og indsendes formularer med Ajax

Indholdsfortegnelse

Vi startede selvstudiet for at få oprette og indsende formularer via Ajax, for dette når vi opretter sider i HTML er det meget let lave former dataindtastning, enten for at tjene os som Kontaktformular med siden eller organisationen selv, til at foretage en undersøgelse, såsom registrering osv. Den normale ting er, at hvis vi vil lave denne formular til noget simpelt, bruger vi PHP Post -metoden til at sende oplysningerne og kunne se, behandle eller ændre dem.

Imidlertid har brugen af ​​denne metode i PHP en stor ulempe, at når vi indtaster data, har vi behov for at opdatere eller genindlæse den pågældende side. Derfor vil vi se en metode, hvor der ikke er behov for det.

Jeg mener en formular oprettet med Ajax, også hjulpet med PHP og oprettet til en side i HTML. Det er klart, at vi skal oprette vores side i HTML, vores indeks, som vi kan tilpasse eller tilpasse med stilarter takket være en CSS -fil.

Efter at have oprettet denne base skal vi oprette yderligere 2 filer, en php -fil, hvor vi vil redigere datainput fra formularen og et script implementeret i javascript, det vil sige en .js -fil. Det er i dette script, at vi vil bruge Ajax til at behandle dataene på en sådan måde, at vi ikke behøver at genindlæse vores webside, da det ville ske, hvis vi kun brugte en php -metode som Post eller get.

udover dette vi bliver nødt til at inkludere et jQuery -bibliotek at kunne fortolke det, vi skriver med Ajax.

Til at begynde med er det vigtigt at huske, at alle de filer, vi opretter, vores Ajax javascript -fil, som vi vil kalde operation.js, css stylesheet -filen, som vi vil kalde styles.css, hvis vi skal oprette en, og jQuerys bibliotek, skal vi inkludere det i begyndelsen af ​​vores HTML -kode.

Det er så simpelt som inkludere dem i hovedet fra vores index.html:

Nu skal vi oprette en fil med simpel php -kode, som vi vil kalde envio.php, hvor vi vil indsamle de oplysninger, der sendes via vores webside. I dette tilfælde vil oplysningerne være til en kontaktformular, så dataene sendes til vores egen e -mail -adresse for at kunne læse de meddelelser, der er efterladt af brugerne, selvom dette kan ændres og sende det til en anden side eller et andet sted.
 
Efter at have oprettet php -koden, lad os gå til den virkelig interessante ting, der er oprettelsen af ​​vores operation.js -fil, hvor vi vil bruge Ajax. På denne måde behandler vi dataene til vores kontaktformular uden at opdatere siden som tidligere angivet. Først viser vi den kode, vi skal skrive i vores script:
 funktion sendMail () {$ ("# car_send"). attr ("deaktiveret", sandt); $ (". car_error"). fjern (); 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"; } andet {$ (‘# c_mail’). efter ("Indtast gyldig e -mail."); sendMail = "false"; } hvis (s_name.length == 0) {$ (‘# c_name’). efter ("Angiv venligst dit navn."); var sendMail = "false"; } hvis (s_msj.length == 0) {$ (‘# c_msg’). efter ("Enter message."); var sendMail = "false"; } if (sendMail == "true") {var data = {"name": $ ('# c_name'). val (), "email": $ ('# c_mail'). val (), "message" : $ ('# c_msg'). val ()}; $ .ajax ({data: data, url: 'sending.php', type: 'post', beforeSend: function () {$ ("# car_send"). val ("Sender …");}, succes : funktion (svar) {$ ('form') [0] .reset (); $ ("# car_enviar"). val ("Send"); $ ("# c_information p"). html (svar); $ ("#c_information"). fadeIn ('langsom'); $ (" # bil_enviar"). removeAttr ("deaktiveret");}}); } andet {$ ("# car_submit"). removeAttr ("deaktiveret"); }} 
Vi opretter filtervariablen for at verificere, at den e -mail, vi indsætter, er gyldig. Til dette angiver vi, at den indtastede adresse er en række sekvenser af tegn efterfulgt af et at -symbol, en anden sekvens af tegn, en periode og flere tegn. Hvis den ikke har den struktur, når vi sender beskeden, vil den fortælle os, at den ikke kan sendes, da den indtastede e -mail ikke er gyldig. Hvis den opfylder kravene, skal du gemme værdien true i sendemailvariablen sendMail og fortsætte med at kontrollere.

Valider derefter længden af ​​navnet. Hvis det er lig med 0, betyder det, at vi ikke har indtastet et navn, og det beder os om at indtaste det igen.

Det gør det samme med beskeden og dens længde for at kontrollere, at vi ikke har efterladt feltet tomt.

Efter at have kontrolleret alle felterne og set, at de er korrekte, skal du gemme i datavariablen, som er et array, navnet, e -mailen og den meddelelse, der skal sendes.

Endelig, med Ajax, videregiver vi dataene og gør det henvisning til filen envio.php ved hjælp af post -metoden og vi sender oplysningerne. Inden den sendes, vises meddelelsen "sender" indtil processen slutter med succes.

Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt

Du vil bidrage til udviklingen af ​​hjemmesiden, at dele siden med dine venner

wave wave wave wave wave