Kiek kartų susidūrėte su tuo, kad įvedėte neteisingus duomenis, dėl kurių puslapis buvo perkeltas ir visiškai ištrinami laukeliuose įvesti simboliai. Norėdami tai išspręsti, yra gana populiarus būdas sukurti vartotojo sąsają, o jos pavadinimas yra ajax. Jis pateikiamas daugelyje projektų ir naudojamas įvairiais būdais.
Ajax formos siuntimas: bibliotekų sujungimas
Įtraukti jquery biblioteką į index.php.
Yra ir kitas būdas įtraukti jquery į dokumentą. Turite atsisiųsti biblioteką iš oficialios jquery svetainės, įdėkite ją į tinkamą aplanką ir įklijuokite nuorodą į ją taip:
Dokumentų prijungimas ir nustatymas
1. Sukurkite.php dokumentą aplanke su svetaine bet kokiu jums patogiu pavadinimu – tai bus ajax php formos siuntimas. Jame galite parašyti, kokiu formatu bus rodomas tekstas su žinute. Pavyzdžiui, form1.php.
2. „Javascript“failų aplanke sukurkite.js failą naudodamibet koks patogus pavadinimas. Pavyzdžiui, form.js.
3. Prijunkite šį aplanką prie savo dokumento.
4. Sukurkite formą su šiais parametrais:
Joje nepamirškite sukurti laukų duomenims įvesti.
5. Eikite į failą form1.php svetainės kataloge, kuriame parašykite:
Dabar pateikiant formą naršyklė parodys informaciją apie duomenis.
Tame pačiame faile galite įrašyti, kas tiksliai bus rodoma arba kaip. Čia taip pat galite rašyti ciklus arba algoritmus.
Siunčiama ajax jquery forma
1. Sukurtame form.js faile turite įrašyti kodą, kuris yra atsakingas už tai, kad failas veiktų visiškai įkėlus svetainės puslapį.
$(document).ready(function(){ //Kitas kodas veiks čia });
2. Tada turėsite tinkinti pateikimo mygtuką. Atlikite visa tai tame pačiame faile.
$("forma").submit(function(event) { event.preventDefault(); //čia bus parašytas toks kodas });
Pirmoji kodo dalis yra atsakinga už elemento pasirinkimą puslapyje, o antroji – už tai, kad būtų išvengta numatytojo veiksmo.
3. Tada, pavyzdžiui, paimkite ajax formos pateikimą apie sėkmę.
$.ajax({ tipas: $(this).attr('metodas'), url: $(this).attr('veiksmas'), duomenys: new FormData(this), turinio tipas: klaidingas, talpykla: klaidingas, procesasDuomenys: klaidingas, sėkmė: function(result){ alert(result); } });
Toliau pateikiami išsamūs kiekvieno nustatymo aprašymai.
- tipas –tokio tipo prašymas pateikiamas formoje; kadangi tai kainuoja POST, užklausos tipas bus tinkamas;
- tai – elemento pasirinkimas konstrukcijos viduje;
- attr - traukos (traukos) trumpinys, tai yra, traukiamas tam tikras pasirinkto taikinio (formos) parametras;
- url – parametras, atsakingas už tai, kur bus išsiųsta užklausa; šiuo atveju kas parašyta formos parametruose (form1.php);
- duomenys – nurodo formos duomenis;
- contentType – atsakingas už antraščių siuntimą į serverį; šiuo atveju to nereikia;
- cache – atsakinga už vartotojo talpyklos išsaugojimą;
- processData – atsakinga už duomenų konvertavimą į eilutę;
- sėkmė – rodo sėkmingo duomenų pateikimo rezultatą; todėl, jei duomenys buvo išsiųsti sėkmingai, funkcijos veiksmai yra vykdomi.
4. Atlikta, dabar pateikdami ajax formą gausite duomenis neatnaujinę puslapio.
Rezultatą galima pakeisti naudojant form1.php failą, kuriame galite nurodyti, kas tiksliai bus rodoma kaip rezultatas. Pavyzdžiui, Galite eksperimentuoti ir sukurti tam tikrų duomenų įvedimo teisingumo patikrą: jei duomenys neteisingi, tada rodomas norimas pranešimas, kitu atveju nukreipia į teisingą puslapį. Įmanomi ir daugelis kitų dalykų, ko tik geidžia jūsų širdis.
Duomenys į serverį taip pat siunčiami asinchroniškai. Tai yra tada, kai vartotojas įveda tekstą ir jis iš karto paryškinamas raudonai, nurodant, kad įvesti duomenys neteisingi. Apie taiinternete yra daug vadovų, kuriuose viskas aiškiai paaiškinta ir parodyta su pavyzdžiais.
Išvada
Be jokios abejonės, ajax yra naudingas įrankis kuriant svetaines. Norint sukurti aukštos kokybės puslapius ir sąsajas, tai tiesiog būtina. Verta paminėti, kad norint visiškai suprasti paveikslėlį ir kas parašyta kode, labai svarbu žinoti jQuery, nes paprastas copy-paste ne visada gali padėti ir išmokyti suprasti kodą. Visada verta atsiminti, kad kalbinės versijos atnaujinamos ir kai kurios funkcijos gali tiesiog išnykti. Todėl ne visi sprendimai gali būti aktualūs, dažnai parašytas kodas tiesiog neveikia arba neduoda tokio rezultato, kokį norėtumėte matyti savo ekrane.
