Koliko puta ste se susreli sa činjenicom da ste uneli netačne podatke, zbog čega se stranica ponovo učitala i potpuno izbrisala znakove unesene u polja. Da bi se ovo popravilo, postoji prilično popularan pristup izgradnji korisničkog interfejsa, a njegovo ime je ajax. Pojavljuje se u mnogim projektima i koristi se na mnogo načina.
Slanje ajax obrasca: povezivanje biblioteka
Uključi jquery biblioteku u index.php.
Postoji još jedan način da uključite jquery u dokument. Morate preuzeti biblioteku sa jquery službene stranice, smjestiti je u pravu mapu i zalijepiti link na nju ovako:
Povezivanje i postavljanje dokumenata
1. Kreirajte.php dokument u folderu sa sajtom sa bilo kojim imenom koje vam odgovara - ovo će biti slanje ajax php forme. U njemu možete napisati u kom formatu će biti prikazan tekst sa porukom. Na primjer, form1.php.
2. U fascikli javascript datoteka kreirajte.js datoteku sabilo koji pogodan naziv. Na primjer, form.js.
3. Povežite ovaj folder sa svojim dokumentom.
4. Kreirajte obrazac sa sljedećim parametrima:
U njemu ne zaboravite kreirati polja za unos vaših podataka.
5. Idite na fajl form1.php u direktorijum sa sajtom, u koji upišite:
Sada, prilikom slanja obrasca, pretraživač će prikazati informacije o podacima.
U istom fajlu možete napisati šta će tačno biti prikazano ili kako. Ovdje također možete pisati cikluse ili algoritme.
Slanje ajax jquery obrasca
1. U kreiranom fajlu form.js potrebno je da upišete kod koji je odgovoran za rad fajla nakon što se stranica u potpunosti učita.
$(document).ready(function(){ //Naš sljedeći kod će raditi ovdje });
2. Zatim morate prilagoditi dugme za slanje. Uradite sve u istom fajlu.
$("form").submit(function(event) { event.preventDefault(); //ovdje će biti napisan sljedeći kod });
Prvi dio koda je odgovoran za odabir elementa na stranici, a drugi je odgovoran za sprječavanje zadane radnje.
3. Zatim, na primjer, podnesite ajax obrazac nakon uspjeha.
$.ajax({ type: $(this).attr('method'), url: $(this).attr('action'), data: new FormData(this), contentType: false, cache: false, processData: false, uspjeh: funkcija(rezultat){ alert(result); } });
Slijede detaljni opisi svake postavke.
- tip -ovo je tip zahtjeva koji se podnosi u obrascu; budući da košta POST, tip zahtjeva će biti odgovarajući;
- this - odabir elementa unutar konstrukcije;
- attr - skraćenica za privlačnost (atrakcija), odnosno privučen je određeni parametar odabrane mete (forme);
- url - parametar odgovoran za to gdje će zahtjev biti poslan; u ovom slučaju, ono što je napisano u parametrima forme (form1.php);
- data - specificira podatke obrasca;
- contentType - odgovoran za slanje zaglavlja na server; u ovom slučaju nije potrebno;
- cache - odgovoran za čuvanje keša korisnika;
- processData - odgovoran za pretvaranje podataka u niz;
- success - prikazuje rezultat uspješnog podnošenja podataka; stoga, ako je slanje podataka bilo uspješno, tada se izvršavaju akcije funkcije.
4. Gotovo, sada prilikom slanja ajax obrasca, dobit ćete podatke bez osvježavanja stranice.
Rezultat se može promijeniti korištenjem form1.php datoteke, gdje možete odrediti šta će tačno biti prikazano kao rezultat. Na primjer, Možete eksperimentisati i kreirati proveru ispravnosti unosa određenih podataka: ako podaci nisu tačni, onda se prikazuje željena poruka, u suprotnom preusmerava na ispravnu stranicu. Moguće su i mnoge druge stvari, šta god vam srce poželi.
Također se šalju podaci na server asinhrono. To je kada korisnik unese tekst, koji se odmah istakne crvenom bojom, što znači da uneseni podaci nisu tačni. O tomepostoji mnogo priručnika na internetu, gdje je sve jasno objašnjeno i prikazano na primjerima.
Zaključak
Nesumnjivo, ajax je koristan alat u izgradnji web stranica. Da biste napravili visokokvalitetne stranice i interfejse, to je jednostavno neophodno. Vrijedi napomenuti da je vrlo važno poznavati jQuery da biste u potpunosti razumjeli sliku i ono što je napisano u kodu, jer jednostavno copy-paste ne može uvijek pomoći i naučiti vas da razumijete kod. Uvijek je vrijedno zapamtiti da se jezičke verzije ažuriraju i da neke funkcije mogu jednostavno nestati. Stoga, nisu sva rješenja relevantna, često pisani kod jednostavno ne funkcionira ili ne daje rezultat koji biste željeli vidjeti na svom ekranu.
