Koľkokrát ste sa stretli s tým, že ste zadali nesprávne údaje, kvôli čomu sa stránka znova načítala a úplne vymazala znaky zadané do polí. Na vyriešenie tohto problému existuje pomerne populárny prístup k vytváraniu používateľského rozhrania a jeho názov je ajax. Objavuje sa v mnohých projektoch a používa sa mnohými spôsobmi.
Odoslanie formulára ajax: prepojenie knižníc
Zahrnúť knižnicu jquery do súboru index.php.
Existuje ďalší spôsob, ako zahrnúť jquery do dokumentu. Musíte si stiahnuť knižnicu z oficiálnej stránky jquery, umiestniť ju do správneho priečinka a prilepiť odkaz na ňu takto:
Pripojenie a nastavenie dokumentov
1. Vytvorte.php dokument v priečinku s webom s ľubovoľným názvom, ktorý vám vyhovuje - odošlete tak ajax php formulár. V ňom môžete napísať, v akom formáte sa text so správou zobrazí. Napríklad form1.php.
2. V priečinku súborov javascript vytvorte súbor.js sakékoľvek vhodné meno. Napríklad form.js.
3. Pripojte tento priečinok k svojmu dokumentu.
4. Vytvorte formulár s nasledujúcimi parametrami:
V ňom si nezabudnite vytvoriť polia na zadávanie údajov.
5. Prejdite do súboru form1.php v adresári so stránkou, do ktorého napíšte:
Teraz pri odosielaní formulára prehliadač zobrazí informácie o údajoch.
V tom istom súbore môžete napísať, čo presne sa bude zobrazovať alebo ako. Môžete tu tiež písať cykly alebo algoritmy.
Odosielanie formulára ajax jquery
1. Do vytvoreného súboru form.js musíte napísať kód, ktorý je zodpovedný za fungovanie súboru po úplnom načítaní stránky lokality.
$(document).ready(function(){ //Náš ďalší kód sa spustí tu });
2. Potom musíte prispôsobiť tlačidlo Odoslať. Urobte to všetko v rovnakom súbore.
$("form").submit(funkcia(udalosť) { event.preventDefault(); //tu bude napísaný nasledujúci kód });
Prvá časť kódu zodpovedá za výber prvku na stránke a druhá časť je zodpovedná za zabránenie predvolenej akcii.
3. Potom, napríklad, odošlite formulár ajax o úspechu.
$.ajax({ typ: $(this).attr('metóda'), url: $(this).attr('akcia'), údaje: new FormData(this), contentType: false, cache: false, processData: false, success: function(result){ alert(result); } });
Nasleduje podrobný popis každého nastavenia.
- type -ide o typ žiadosti, ktorá sa podáva vo formulári; keďže to stojí POST, typ požiadavky bude vhodný;
- this - výber prvku vo vnútri konštrukcie;
- attr - skratka pre príťažlivosť (príťažlivosť), to znamená, že určitý parameter zvoleného cieľa (formy) je priťahovaný;
- url - parameter zodpovedný za to, kam bude požiadavka odoslaná; v tomto prípade to, čo je napísané v parametroch formulára (form1.php);
- data – určuje údaje formulára;
- contentType – zodpovedá za odosielanie hlavičiek na server; v tomto prípade to nie je potrebné;
- cache – zodpovedá za uloženie vyrovnávacej pamäte používateľa;
- processData – zodpovedný za konverziu údajov na reťazec;
- success – zobrazuje výsledok úspešného odoslania údajov; preto, ak bolo odoslanie údajov úspešné, vykonajú sa akcie funkcie.
4. Hotovo, teraz pri odosielaní formulára ajax budete dostávať údaje bez obnovovania stránky.
Výsledok je možné zmeniť pomocou súboru form1.php, kde môžete určiť, čo presne sa zobrazí ako výsledok. Napríklad
Môžete experimentovať a vytvoriť kontrolu správnosti zadania určitých údajov: ak údaje nie sú správne, zobrazí sa požadovaná správa, v opačnom prípade vás presmeruje na správnu stránku. Mnoho iných vecí je tiež možných, bez ohľadu na to, po čom vaše srdce túži.
Existuje aj asynchrónne odosielanie údajov na server. Vtedy používateľ zadá text, ktorý sa okamžite zvýrazní červenou farbou, čo znamená, že zadané údaje nie sú správne. O tomna internete je veľa návodov, kde je všetko jasne vysvetlené a znázornené na príkladoch.
Záver
Ajax je nepochybne užitočný nástroj pri vytváraní webových stránok. Na vytvorenie vysokokvalitných stránok a rozhraní je to jednoducho nevyhnutné. Stojí za zmienku, že je veľmi dôležité poznať jQuery, aby ste plne porozumeli obrázku a tomu, čo je napísané v kóde, pretože jednoduché kopírovanie a vkladanie nemôže vždy pomôcť a naučiť vás porozumieť kódu. Vždy je potrebné pamätať na to, že jazykové verzie sú aktualizované a niektoré funkcie môžu jednoducho zmiznúť. Preto nemusia byť všetky riešenia relevantné, často napísaný kód jednoducho nefunguje alebo neprináša výsledok, ktorý by ste chceli vidieť na obrazovke.
