Kolikokrat ste naleteli na dejstvo, da ste vnesli napačne podatke, zaradi česar se je stran ponovno naložila in popolnoma izbrisala znake, vnesene v polja. Da bi to odpravili, obstaja precej priljubljen pristop k izdelavi uporabniškega vmesnika, njegovo ime pa je ajax. Pojavlja se v številnih projektih in se uporablja na več načinov.
Pošiljanje obrazca ajax: povezovanje knjižnic
Vključi knjižnico jquery v index.php.
Obstaja še en način za vključitev jqueryja v dokument. Knjižnico morate prenesti z uradnega mesta jquery, jo postaviti v pravo mapo in prilepiti povezavo do nje takole:
Povezovanje in nastavitev dokumentov
1. Ustvarite dokument.php v mapi s spletnim mestom s poljubnim imenom, ki vam ustreza - to bo pošiljanje obrazca ajax php. V njem lahko napišete, v kakšni obliki bo besedilo s sporočilom prikazano. Na primer form1.php.
2. V mapi z datotekami javascript ustvarite datoteko.js zpoljubno priročno ime. Na primer form.js.
3. Povežite to mapo s svojim dokumentom.
4. Ustvarite obrazec z naslednjimi parametri:
V njem ne pozabite ustvariti polj za vnos vaših podatkov.
5. Pojdite na datoteko form1.php v imeniku s spletnim mestom, v katerega napišite:
Zdaj, ko oddate obrazec, bo brskalnik prikazal informacije o podatkih.
V isti datoteki lahko napišete, kaj točno bo prikazano ali kako. Tukaj lahko pišete tudi cikle ali algoritme.
Pošiljanje obrazca ajax jquery
1. V ustvarjeno datoteko form.js morate napisati kodo, ki je odgovorna za delovanje datoteke, potem ko je stran spletnega mesta v celoti naložena.
$(document).ready(function(){ //Naša naslednja koda se bo izvajala tukaj });
2. Nato morate prilagoditi gumb za pošiljanje. Naredi vse v isti datoteki.
$("obrazec").submit(function(event) { event.preventDefault(); //tu bo zapisana naslednja koda });
Prvi del kode je odgovoren za izbiro elementa na strani, drugi del pa za preprečevanje privzetega dejanja.
3. Nato na primer ob uspehu oddajte obrazec ajax.
$.ajax({ type: $(this).attr('method'), url: $(this).attr('action'), data: new FormData(this), contentType: false, cache: false, processData: false, uspeh: funkcija(rezultat){ alert(result); } });
V nadaljevanju so podrobni opisi vsake nastavitve.
- vrsta -to je vrsta zahteve, ki je predložena v obrazcu; ker stane POST, bo vrsta zahteve ustrezna;
- this - izbor elementa znotraj konstrukcije;
- attr - okrajšava za privlačnost (attraction), to pomeni, da se pritegne določen parameter izbrane tarče (oblike);
- url - parameter odgovoren za to, kam bo poslana zahteva; v tem primeru, kar je zapisano v parametrih obrazca (form1.php);
- data - določa podatke obrazca;
- contentType - odgovoren za pošiljanje glav strežniku; v tem primeru ni potreben;
- cache - odgovoren za shranjevanje uporabniškega predpomnilnika;
- processData - odgovoren za pretvorbo podatkov v niz;
- success - prikaže rezultat uspešne oddaje podatkov; torej, če je bilo pošiljanje podatkov uspešno, se izvedejo dejanja funkcije.
4. Končano, zdaj ob oddaji obrazca ajax boste prejeli podatke brez osveževanja strani.
Rezultat lahko spremenite z datoteko form1.php, kjer lahko določite, kaj točno bo prikazano kot rezultat. Na primer, Lahko eksperimentirate in ustvarite preverjanje pravilnosti vnosa določenih podatkov: če podatki niso pravilni, se prikaže želeno sporočilo, sicer pa preusmeri na pravilno stran. Možno je tudi marsikaj drugega, kar ti srce poželi.
Podatki se pošiljajo tudi v strežnik asinhrono. Takrat uporabnik vnese besedilo, ki je takoj označeno z rdečo barvo, kar pomeni, da vneseni podatki niso pravilni. O temna internetu je veliko priročnikov, kjer je vse jasno razloženo in prikazano s primeri.
Sklep
Nedvomno je ajax uporabno orodje pri gradnji spletnih strani. Za izdelavo visokokakovostnih strani in vmesnikov je to preprosto potrebno. Omeniti velja, da je zelo pomembno poznati jQuery, da v celoti razumete sliko in kaj je zapisano v kodi, saj preprosto kopiranje in lepljenje ne more vedno pomagati in vas naučiti razumeti kodo. Vedno si je vredno zapomniti, da so jezikovne različice posodobljene in nekatere funkcije lahko preprosto izginejo. Zato morda niso vse rešitve relevantne, pogosto napisana koda preprosto ne deluje ali ne daje rezultata, ki bi ga želeli videti na zaslonu.
