Koliko puta ste se susreli s činjenicom da ste unijeli netočne podatke, zbog čega se stranica ponovno učitala i potpuno izbrisala znakove unesene u polja. Da bi se to popravilo, postoji prilično popularan pristup izgradnji korisničkog sučelja, a naziv mu 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 uključivanja jqueryja u dokument. Morate preuzeti biblioteku sa službene stranice jquery, smjestiti je u pravu mapu i zalijepiti vezu na nju ovako:
Povezivanje i postavljanje dokumenata
1. Napravite.php dokument u mapi sa web-mjestom s bilo kojim imenom koje vam odgovara - to će biti slanje ajax php obrasca. U njemu možete napisati u kojem će formatu biti prikazan tekst s porukom. Na primjer, form1.php.
2. U mapi javascript datoteka stvorite.js datoteku sbilo koji prikladan naziv. Na primjer, form.js.
3. Povežite ovu mapu sa svojim dokumentom.
4. Napravite obrazac sa sljedećim parametrima:
U njemu ne zaboravite kreirati polja za unos vaših podataka.
5. Idite na datoteku form1.php u direktoriju s web-mjesto, u koji upišite:
Sada, prilikom slanja obrasca, preglednik će prikazati informacije o podacima.
U istoj datoteci možete napisati što će se točno prikazati ili kako. Ovdje također možete pisati cikluse ili algoritme.
Slanje ajax jquery obrasca
1. U kreiranoj datoteci form.js morate napisati kod koji je odgovoran za rad datoteke nakon što se stranica stranice u potpunosti učita.
$(document).ready(function(){ //Naš sljedeći kod će se izvoditi ovdje });
2. Zatim morate prilagoditi gumb za slanje. Učinite sve u istoj datoteci.
$("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); } });
Sljedeći su detaljni opisi svake postavke.
- vrsta -ovo je vrsta zahtjeva koji se podnosi u obrascu; budući da košta POST, vrsta zahtjeva bit će prikladna;
- 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 kamo će se zahtjev poslati; u ovom slučaju, ono što je zapisano u parametrima obrasca (form1.php);
- data - specificira podatke obrasca;
- contentType - odgovoran za slanje zaglavlja na poslužitelj; u ovom slučaju nije potrebno;
- cache - odgovoran za spremanje predmemorije korisnika;
- processData - odgovoran za pretvaranje podataka u niz;
- success - prikazuje rezultat uspješnog slanja podataka; stoga, ako je slanje podataka bilo uspješno, tada se izvršavaju radnje funkcije.
4. Gotovo, sada prilikom slanja ajax obrasca, primit ćete podatke bez osvježavanja stranice.
Rezultat se može promijeniti pomoću form1.php datoteke, gdje možete odrediti što će se točno prikazati kao rezultat. Na primjer, Možete eksperimentirati i napraviti provjeru ispravnosti unosa određenih podataka: ako podaci nisu točni, onda se prikazuje željena poruka, u suprotnom preusmjerava na ispravnu stranicu. Moguće su i mnoge druge stvari, što god vam srce poželi.
Postoji i asinkrono slanje podataka na poslužitelj. To je kada korisnik unese tekst, koji je odmah označen crvenom bojom, što znači da uneseni podaci nisu toč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. Za izradu visokokvalitetnih stranica i sučelja jednostavno je potrebno. Vrijedi napomenuti da je vrlo važno poznavati jQuery kako 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 razumjeti kod. Uvijek je vrijedno zapamtiti da se jezične verzije ažuriraju, a neke značajke mogu jednostavno nestati. Stoga nisu sva rješenja relevantna, često napisani kod jednostavno ne radi ili ne daje rezultat koji biste željeli vidjeti na svom ekranu.
