Pradėjome vadovėlį, kad gautume formų kūrimas ir pateikimas naudojant „Ajax“Tai labai paprasta, kai mes kuriame puslapius HTML formatu daryti formas duomenų įvedimas, arba tarnauti mums Kontaktinė forma su pačiu puslapiu ar organizacija, kad atliktumėte apklausą, pvz., registraciją ir pan. Įprasta yra tai, kad jei norime, kad ši forma būtų kažko paprasto, mes naudojame PHP Post metodą, kad išsiųstume informaciją ir galėtume ją peržiūrėti, apdoroti ar keisti.
Tačiau šio metodo naudojimas PHP turi didelį trūkumą - įvedant duomenis mums reikia atnaujinti arba iš naujo įkelti atitinkamą puslapį. Štai kodėl mes pamatysime metodą, kurio nereikia.
Turiu omenyje formą, sukurtą naudojant „Ajax“, taip pat padėjo PHP ir buvo sukurta HTML puslapiui. Akivaizdu, kad turime sukurti savo puslapį HTML, savo indeksą, kurį galime pritaikyti ar pritaikyti pagal stilių CSS failo dėka.
Sukūrę tą bazę, turėsime sukurti dar 2 failus, php failą, kuriame redaguosime įvestus duomenis pagal formą ir scenarijų, įdiegtą „javascript“, tai yra .js failą. Būtent šiame scenarijuje mes naudosime „Ajax“, kad apdorotume duomenis taip, kad mums nereikėtų iš naujo įkelti savo tinklalapio, kaip tai atsitiktų, jei būtų naudojamas tik toks PHP metodas kaip „Post“ arba „get“.
Be to turėsime įtraukti „jQuery“ biblioteką kad galėtume interpretuoti tai, ką rašome su „Ajax“.
Pirmiausia svarbu prisiminti, kad visi mūsų sukurti failai, „Ajax“ „JavaScript“ failas, kurį vadinsime operacija.js, „css“ stiliaus lapo failas, kurį vadinsime „style.css“, jei ketiname jį sukurti, ir „jQuery“ biblioteką, turime ją įtraukti į savo HTML kodo pradžią.
Tai taip paprasta, kaip įtraukti juos į galvą iš mūsų index.html:
…Dabar mes sukursime failą su paprastu php kodu, kurį vadinsime envio.php, kuriame surinksime informaciją, siunčiamą per mūsų tinklalapį. Tokiu atveju informacija bus skirta kontaktinei formai, todėl duomenys bus siunčiami mūsų pačių el. Pašto adresu, kad galėtume perskaityti vartotojų paliktus pranešimus, nors tai būtų galima pakeisti ir nusiųsti į kitą puslapį ar kitą vietą.
Sukūrę php kodą, pereikime prie tikrai įdomaus dalyko, kuris yra mūsų operacijos.js failo sukūrimas, kuriame naudosime „Ajax“. Tokiu būdu mes tvarkysime kontaktinės formos duomenis, neatnaujinę puslapio, kaip nurodyta anksčiau. Pirmiausia parodysime kodą, kurį turime parašyti savo scenarijuje:
funkcija sendMail () {$ ("# car_send"). attr ("išjungta", tiesa); $ (". car_error"). remove (); var filtras = / [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 = "tiesa"; } else {$ (‘# c_mail’). after ("Įveskite tinkamą el. pašto adresą."); sendMail = "klaidinga"; } if (s_name.length == 0) {$ (‘# c_name’). after ("Prašome įvesti savo vardą."); var sendMail = "klaidinga"; } if (s_msj.length == 0) {$ (‘# c_msg’). after ("Įveskite pranešimą."); var sendMail = "klaidinga"; } if (sendMail == "true") {var data = {"name": $ ('# c_name'). val (), "email": $ ('# c_mail'). val (), "message" : $ ('# c_msg'). val ()}; $ .ajax ({duomenys: duomenys, URL: 'send.php', tipas: 'post', beforeSend: function () {$ ("# car_send"). val ("Siunčiama …");}, sėkmė : funkcija (atsakymas) {$ ('forma') [0] .reset (); $ ("# car_enviar"). val ("Pateikti"); $ ("# c_information p"). html (atsakymas); $ ("#c_information"). fadeIn ('lėtas'); $ (" # car_enviar"). removeAttr ("išjungta");}}); } else {$ ("# car_submit"). removeAttr ("išjungta"); }} Sukuriame filtro kintamąjį, kad patikrintume, ar įterptas el. Pašto adresas yra teisingas, todėl nurodome, kad įvestas adresas yra tam tikra simbolių seka, po kurios seka simbolis at, kita simbolių seka, taškas ir daugiau simbolių. Jei siunčiant pranešimą ji neturi tokios struktūros, ji mums pasakys, kad jos negalima išsiųsti, nes įvestas el. Jei jis atitinka reikalavimus, išsaugokite reikšmę true el. Pašto kintamajame sendMail ir tęskite tikrinimą.
Tada patvirtinkite vardo ilgį. Jei jis lygus 0, tai reiškia, kad neįvedėme vardo ir prašo jį įvesti dar kartą.
Tą patį daro pranešimas ir jo ilgis, kad patikrintų, ar nepalikome lauko tuščio.
Patikrinę visus laukus ir pamatę, kad jie teisingi, išsaugokite duomenų kintamajame, kuris yra masyvas, vardą, el. Laišką ir išsiųstą pranešimą.
Galiausiai, naudodami „Ajax“, perduodame duomenis ir darome nuoroda į failą envio.php, naudojant pašto metodą ir siunčiame informaciją. Prieš išsiunčiant, pasirodo pranešimas "siunčia" kol procesas baigsis sėkmingai.
Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką
