Koliko ste puta naišli na pogrešan unos podataka, što je uzrokovalo ponovno pokretanje stranice i potpuno uklanjanje unesenih znakova u polja. Da biste to popravili, postoji vrlo popularan pristup izgradnji korisničkog sučelja, a njegovo ime je ajax. Nalazi se u mnogim projektima i koristi se na mnogo načina.
Slanje ajax obrasca: povezivanje knjižnica
& lt; script type = "text /javascript" src = "//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
Postoji još jedan način da se jquery uključi u dokument. Knjižnicu morate preuzeti s službene internetske stranice jquery-a, smjestiti u odgovarajuću mapu i zalijepiti vezu u nju na isti način:
& lt ;! - fb_336x280_mid - & gt;
& lt; script & gt; (adsbygoogle = window.adsbygoogle || []). push ({});
Povezivanje i konfiguracija dokumenata
1. Stvorite dokument formata u mapi s mjestom. php s bilo kojim imenom prikladnim za vas - ovo ć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, kreirajte .js datoteku s bilo kojim prikladnim imenom. Na primjer, form.js
3. Povežite ovu mapu s dokumentom.
& lt; script type = "text /javascript" src = "/js /form.js" & gt;
4. Napravite obrazac sa sljedećim parametrima:
U njemu ne zaboravite stvoriti polja za unos podataka.
& lt ;! - fb_336x280_2 - & gt;
& lt; skripta & gt; (adsbygoogle = window.adsbygoogle || []). push ({});
5. Otvorite datoteku form1.php u direktoriju s web-mjestom na koje pišete:
Sada, kada šaljete obrazac, preglednik će prikazati podatke o podacima ,
U istoj datoteci možete napisati što će biti prikazano ili kako. Dakle, ovdje možete pisati cikluse ili algoritme.
Slanje ajax jquery obrasca
1. U kreiranoj form.js datoteci trebate napisati kod koji je odgovoran za osiguravanje da datoteka radi nakon što je stranica u potpunosti učitala stranicu.
$ (document) .ready (funkcija () {
//Evo sljedećeg koda
});2. Zatim trebate odabrati gumb submit. Učinite sve u istoj datoteci.
$ ("form") submit (funkcija (event))
event.preventDefault ();
//ovdje će biti napisan sljedeći kod
});
Prvi dio koda odgovoran je za odabir stavke na stranici, a drugi za sprječavanje zadane radnje.
3. Na primjer, pošaljite obrazac ajaxa s uspješnim slanjem podataka.
$ .ajax ({
type: $ (this) .attr ('method'),
url: $ (this) .attr ('action'),
) datum: novi FormData (this),
contentType: false,
cache: false,
processdata: false,
success: function (result) {
alert (rezultat)
}
}); Ispod se svaka postavka detaljno razmatra.
- tip - vrsta zahtjeva koji se šalje u pisanom obliku; budući da se radi o POST-u, vrsta zahtjeva će biti prikladna;
- ovo - izbor elementa unutar dizajna;
- attr - skraćeno odprivlačnost, tj. određeni parametar odabranog cilja (oblika);
- url - parametar koji je odgovoran za slanje zahtjeva; u ovom slučaju - što je zapisano u parametrima obrasca (form1.php);
- podaci - određuje podatke obrasca;
- contentType - odgovoran za slanje zaglavlja poslužitelju; u ovom slučaju to nije potrebno;
- cache - je odgovoran za spremanje predmemorije od korisnika;
- processData - odgovoran za pretvaranje podataka u niz;
- uspjeh - prikazuje rezultate uspješnog slanja podataka; tako da ako je slanje podataka bilo uspješno, tada se izvršavaju funkcije funkcije.
4. Završite, sada kada šaljete ajax obrasce, primit ćete podatke bez ažuriranja stranice.
& lt; script type = "text /javascript" & gt;
može blockSettings2 = {blockId: "R-A-271049-5", renderTo: "yandex_rtb_R-A-70350-39", async: 0};
if (document.cookie.indexOf ("abmatch ="))> = 0) blockSettings2.statId = 70350;
Funkcija (a, b, c, d, e) {a [c] = a [c] || [], a [c] .push (funkcija () {Ya.Context.AdvManager.render (blockSettings2)}), e = b.getElementsByTagName ("script") , d = b.createElement ("script"), d.type = "text /javascript", d.src = "//an.yandex .ru /system /context.js ", d.async =! 0e.parentNode.insertBefore (d, e)} (ovaj, ovaj.dokument," yandexContextAsyncCallbacks ");
Rezultat se može promijeniti pomoću datoteke form1.php, gdje možete odrediti što će točno biti prikazano kao rezultat. Na primjer,
Možete eksperimentirati i stvoriti provjeru ispravnosti unosa određenih podataka: ako su podaci netočni, prikazuje se poruka ili se na drugi način preusmjerava na stranicu , Postoji i još mnogo toga što vaša duša želi.
Također postoji asinkrono slanje podataka na poslužitelj. To je kada korisnik unese tekst i odmah je označen crvenom bojomu boji, navodeći da su uneseni podaci netočni. O tome postoje mnogi priručnici na internetu, gdje je sve jasno objašnjeno i prikazano u primjerima.Zaključak
Nesumnjivo, ajax je koristan alat u stvaranju stranica. Da biste napravili kvalitetne stranice i sučelja, to je samo potrebno. Važno je napomenuti da je vrlo važno znati jquery kako bi se razumjela cjelovita slika onoga što je napisano u kodu, jer jednostavna copy-paste ne može uvijek pomoći i naučiti razumijevanje koda. Uvijek je vrijedno zapamtiti da se jezične verzije ažuriraju, a neke značajke jednostavno mogu nestati. Stoga, ne mogu sva rješenja biti stvarna, najčešće pisani kod jednostavno ne radi ili ne daje rezultat koji bih volio vidjeti na ekranu.
