Kolikrát jste se setkali s tím, že jste zadali nesprávná data, kvůli čemuž se stránka znovu načetla a úplně smazala znaky zadané do polí. Chcete-li to opravit, existuje poměrně populární přístup k vytváření uživatelského rozhraní a jeho název je ajax. Objevuje se v mnoha projektech a používá se mnoha způsoby.
Odeslání formuláře ajax: propojení knihoven
Zahrnout knihovnu jquery do index.php.
Existuje jiný způsob, jak zahrnout jquery do dokumentu. Musíte si stáhnout knihovnu z oficiální stránky jquery, umístit ji do správné složky a vložit na ni odkaz takto:
Připojování a nastavení dokumentů
1. Vytvořte.php dokument ve složce s webem s libovolným názvem, který vám vyhovuje - odešlete formulář ajax php. V něm můžete napsat, v jakém formátu se text se zprávou zobrazí. Například form1.php.
2. Ve složce souborů javascript vytvořte soubor.js sjakékoli vhodné jméno. Například form.js.
3. Připojte tuto složku ke svému dokumentu.
4. Vytvořte formulář s následujícími parametry:
V něm nezapomeňte vytvořit pole pro zadávání vašich údajů.
5. Přejděte do souboru form1.php v adresáři s webem, do kterého napište:
Nyní při odesílání formuláře prohlížeč zobrazí informace o datech.
Ve stejném souboru můžete napsat, co přesně se bude zobrazovat nebo jak. Zde můžete také psát cykly nebo algoritmy.
Odesílání ajax jquery formuláře
1. Do vytvořeného souboru form.js musíte napsat kód, který je zodpovědný za zprovoznění souboru po úplném načtení stránky webu.
$(document).ready(function(){ //Náš další kód poběží zde });
2. Poté je třeba upravit tlačítko Odeslat. Udělejte to vše ve stejném souboru.
$("form").submit(funkce(událost) { event.preventDefault(); //zde bude napsán následující kód });
První část kódu je zodpovědná za výběr prvku na stránce a druhá je zodpovědná za zabránění výchozí akci.
3. Pak například odešlete formulář ajax o úspěchu.
$.ajax({ type: $(this).attr('method'), url: $(this).attr('action'), data: new FormData(this), contentType: false, cache: false, processData: false, success: function(result){ alert(result); } });
Následuje podrobný popis každého nastavení.
- type -toto je typ požadavku, který se podává ve formuláři; protože to stojí POST, typ požadavku bude vhodný;
- this - výběr prvku uvnitř konstrukce;
- attr - zkratka pro přitažlivost (přitažlivost), to znamená, že určitý parametr zvoleného cíle (formy) je přitahován;
- url - parametr odpovědný za to, kam bude požadavek odeslán; v tomto případě to, co je napsáno v parametrech formuláře (form1.php);
- data – specifikuje data formuláře;
- contentType – odpovídá za odesílání hlaviček na server; v tomto případě to není potřeba;
- cache – odpovídá za ukládání mezipaměti uživatele;
- processData – odpovídá za převod dat na řetězec;
- success - zobrazuje výsledek úspěšného odeslání dat; proto, pokud bylo odeslání dat úspěšné, budou provedeny akce funkce.
4. Hotovo, nyní při odesílání formuláře ajax obdržíte data bez obnovování stránky.
Výsledek lze změnit pomocí souboru form1.php, kde můžete určit, co přesně se bude jako výsledek zobrazovat. Například
Můžete experimentovat a vytvořit kontrolu správnosti zadání určitých údajů: pokud údaje nejsou správné, zobrazí se požadovaná zpráva, jinak vás přesměruje na správnou stránku. Mnoho dalších věcí je také možné, ať si vaše srdce přeje.
Existuje také asynchronní odesílání dat na server. To je, když uživatel zadá text a ten se okamžitě zvýrazní červeně, což znamená, že zadaná data nejsou správná. O tomna internetu je mnoho návodů, kde je vše jasně vysvětleno a ukázáno na příkladech.
Závěr
Ajax je nepochybně užitečný nástroj při vytváření webových stránek. Chcete-li vytvořit vysoce kvalitní stránky a rozhraní, je to prostě nutné. Stojí za zmínku, že je velmi důležité znát jQuery, abyste plně porozuměli obrázku a tomu, co je napsáno v kódu, protože jednoduché kopírování a vkládání nemůže vždy pomoci a naučit vás porozumět kódu. Vždy je třeba mít na paměti, že jazykové verze jsou aktualizovány a některé funkce mohou jednoduše zmizet. Proto nemusí být všechna řešení relevantní, často napsaný kód jednoduše nefunguje nebo nepřináší výsledek, který byste chtěli vidět na obrazovce.
