Vi började handledningen för att få skapa och skicka formulär via Ajax, för detta när vi skapar sidor i HTML är det väldigt enkelt göra former datainmatning, antingen för att tjäna oss som Kontaktformulär med sidan eller organisationen själv, för att genomföra en undersökning, till exempel registrering etc. Det normala är att om vi vill göra detta formulär för något enkelt använder vi PHP Post -metoden för att skicka informationen och kunna se, bearbeta eller ändra den.
Användningen av denna metod i PHP har dock en stor nackdel, att när vi matar in data måste vi uppdatera eller ladda om sidan i fråga. Det är därför vi kommer att se en metod där det inte finns något behov av det.
Jag menar ett formulär skapat med Ajax, också hjälpt till med PHP och skapat för en sida i HTML. Uppenbarligen måste vi skapa vår sida i HTML, vårt index, som vi kan anpassa eller anpassa med stilar tack vare en CSS -fil.
Efter att ha skapat den basen måste vi skapa ytterligare 2 filer, en php -fil där vi redigerar datainmatningen med formuläret och ett skript implementerat i javascript, det vill säga en .js -fil. Det är i detta skript som vi kommer att använda Ajax för att bearbeta data på ett sådant sätt att vi inte behöver ladda om vår webbsida eftersom det skulle hända om vi bara använde en php -metod som Post eller get.
Förutom detta vi måste inkludera ett jQuery -bibliotek att kunna tolka det vi skriver med Ajax.
Till att börja med är det viktigt att komma ihåg att alla filer som vi skapar, vår Ajax javascript -fil som vi kommer att kalla operation.js, css -formatmallfilen som vi kommer att kalla styles.css, om vi ska skapa en, och jQuerys bibliotek måste vi inkludera den i början av vår HTML -kod.
Det är så enkelt som inkludera dem i huvudet från vårt index.html:
…Nu ska vi skapa en fil med enkel php -kod som vi kommer att kalla envio.php där vi samlar in informationen som skickas via vår webbsida. I det här fallet kommer informationen att vara för ett kontaktformulär så data kommer att skickas till vår egen e -postadress för att kunna läsa meddelanden som lämnas av användare, även om detta kan ändras och skicka det till en annan sida eller en annan plats.
Efter att ha skapat php -koden, låt oss gå till det riktigt intressanta som är skapandet av vår operation.js -fil där vi kommer att använda Ajax. På så sätt kommer vi att behandla uppgif.webpterna för vårt kontaktformulär utan att uppdatera sidan som tidigare angetts. Först kommer vi att visa koden som vi måste skriva i vårt manus:
function sendMail () {$ ("# car_send"). attr ("inaktiverad", sant); $ (". car_error"). ta bort (); 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"; } annat {$ (‘# c_mail’). efter ("Ange giltig e -postadress."); sendMail = "false"; } if (s_name.length == 0) {$ (‘# c_name’). efter ("Ange ditt namn."); var sendMail = "false"; } if (s_msj.length == 0) {$ (‘# c_msg’). efter ("Ange meddelande."); var sendMail = "false"; } if (sendMail == "true") {var data = {"name": $ ('# c_name'). val (), "email": $ ('# c_mail'). val (), "meddelande" : $ ('# c_msg'). val ()}; $ .ajax ({data: data, url: 'sending.php', typ: 'post', beforeSend: function () {$ ("# car_send"). val ("Skickar …");}, framgång : funktion (svar) {$ ('form') [0] .reset (); $ ("# car_enviar"). val ("Skicka"); $ ("# c_information p"). html (svar); $ ("#c_information"). fadeIn ('långsam'); $ (" # car_enviar"). removeAttr ("inaktiverad");}}); } annat {$ ("# car_submit"). removeAttr ("inaktiverad"); }} Vi skapar filtervariabeln för att verifiera att e -postmeddelandet som vi sätter in är giltigt, för detta sätter vi att den inmatade adressen är en sekvens av tecken följt av en at -symbol, en annan sekvens av tecken, en punkt och fler tecken. Om det inte har den strukturen när vi skickar meddelandet kommer det att berätta att det inte kan skickas eftersom det angivna e -postmeddelandet inte är giltigt. Om det uppfyller kraven, lagra värdet true i variabeln send e -post sendMail och fortsätt kontrollera.
Validera sedan namnets längd. Om det är lika med 0 betyder det att vi inte har angett ett namn och det ber oss att ange det igen.
Det gör samma sak med meddelandet och dess längd för att kontrollera att vi inte har lämnat fältet tomt.
Efter att ha kontrollerat alla fält och sett att de är korrekta, spara i datavariabeln som är en array, namnet, e -postmeddelandet och meddelandet som ska skickas.
Slutligen, med Ajax, skickar vi data och gör det referens till filen envio.php med postmetoden och vi skickar informationen. Innan det skickas visas meddelandet "sändning" tills processen avslutas framgångsrikt.
Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng
