JQuery je javascriptová knihovna, jejímž cílem je „psat méně, dělat více“. jQuery lze snadno připojit k vašemu webu a začít používat. S jQuery je mnohem snazší používat javascript na vašich stránkách.
jQuery eliminuje spoustu javascriptových řádků kódu a umožňuje vám implementovat tuto spoustu řádků pouze jednou metodou.
Co je AJAX?
AJAX je asynchronní (tzn. prohlížeč po odeslání požadavku může dělat cokoli, například zobrazit zprávu o čekání na odpověď, posouvat stránku atd.) JavaScript a XML. Slouží k vytváření dynamických a rychlých webových stránek. AJAX nám umožňuje aktualizovat část webové stránky bez opětovného načítání celé stránky.
A co jQuery a AJAX?
Kombinace jQuery a AJAX poskytuje výkonné funkce. S pomocí jquery a ajax můžete zadat požadavek a získat informace v různých formátech, včetně XML, HTML a dokonce i prostého textu. Pro výměnu dat můžete použít formát JSON. Data přijatá z požadavku ajax můžeme použít na naší html stránce.
Díky jQuery je stávající Ajax API založené na prohlížeči výkonnější a snadněji použitelné. Provádění volání ajaxu normálním způsobem pomocí javascriptu je trochu složitější: protože musíte vzít v úvahu, že různé prohlížeče vyžadují různé přístupy k vytvoření objektu XMLHttpRequest. Také odesílání dat například z formulářů je obtížnější, pokud pro volání ajax použijete běžný javascript.
jQuery poskytuje jednoduchou a výkonnou funkcionalitu, která rozšiřuje javascriptové metody AJAX a poskytuje flexibilnější přístup.
V tomto krátkém článku vám to ukážu jak používat jQuery a AJAX v jednoduchý php formulář... Začněme ... Pro použití jQuery a AJAX potřebujeme dva soubory, první soubor bude obsahovat html / php kód, přes který bude iax požadavek proveden. V druhém souboru zpracujeme ajaxový požadavek a vrátíme výsledek na první stránku.
Krok 1. Vytvořte soubor school.php a vložte do něj následující kód:
Ve výše uvedeném kódu získáme jméno a číslo studenta a pomocí jquery a ajaxu je pošleme na adresu details.php.
| Tvé jméno: | ||
| Číslo role: | ||
Krok 2: Vytvořte details.php a vložte do něj následující kód:
Ve výše uvedeném kódu získáme adresu studenta pomocí pořadového čísla a jeho jména.
Pro tento příklad budete muset vytvořit školní databázi a tabulku studentů. Tabulka studentů obsahuje pole se jmény, pořadovým číslem a adresou.
Doufám, že vám tento článek pomůže.
Metoda post () je obvykle určena k odesílání dat na server (například z formuláře).
V souvislosti s metodou post to stojí za zmínku json je textový formát založený na javascriptu. Může být použit téměř jakýmkoli programovacím jazykem.
jQuery, Ajax POST požadavek
jQuery.post (url ,,,)- První argument (url) je adresa URL dokumentu, na který je požadavek odeslán;
- Druhý argument (data) jsou data odeslaná na server, obvykle reprezentovaná jako objekt js;
- Třetí argument (zpětné volání (data, textStatus, jqXHR)) je funkce volaná poté, co server odpoví. Jako argumenty tuto funkci přijímá data odeslaná serverem v reakci na požadavek a stav, jak byl požadavek dokončen.
json_decode () a json_encode ()
PROTI jazyk PHP(od 5.2) je v jádru zahrnuta podpora JSON v podobě funkcí json_decode () (dekóduje řetězec JSON) a json_encode (), které samy převádějí datové typy JSON na vhodné Typy PHP a naopak.
1, "b" => 2); echo json_encode ($ arr); ?>Výsledek
("a": 1, "b": 2, "c": 3, "d": 4, "e": 5)PHP příklad funkce json_decode
$ json = "(" a ": 1," b ": 2)"; var_dump (json_decode ($ json, true)); $ arr = json_decode ($ json, true); echo"". $ arr [" a "]."
". $ arr [" b "]."
";
Výsledek
pole (5) (["a"] => int (1) ["b"] => int (2)) 1 2Příklad toho, jak funguje požadavek Ajax pomocí metody POST
Co budeme dělat:
Kontrolujeme správnost odeslaných (POST-request AJAX) údajů (údaje zadává uživatel). Pokud jsou údaje správné, zobrazíme zprávu. V opačném případě provedeme červené zvýraznění poblíž polí. Vše funguje asynchronně, tedy bez opětovného načítání stránky. Můžeš použít tento princip, například pro vytvoření systému komentářů s vkládáním komentářů do databáze.
jQuery
$ (document) .ready (funkce () (var working = false; / * Tento příznak zabraňuje odeslání více komentářů: * / $ ("formulář")). Odeslat (funkce (e) (e.preventDefault (); pokud (working ) return false; working = true; $ ("# odeslat"). val ("Počkejte .."); $ (". chyba"). removeClass ("chyba"); $ .post ("submit.php ", $ (toto) .serialize (), funkce (msg) (/ * Odeslání hodnot formuláře k odeslání.php: * / working = false; $ ("# odeslat"). val ("Odeslat"); pokud (msg.status ) // Pokud jsou data správná, přidejte zprávu (console.log (msg.status); $ (msg.html) .hide (). InsertBefore ("form"). SlideDown ();) else (// Pokud se vyskytnou chyby, projděte objekt // msg.errors a zobrazte je na stránce $ .each (msg.errors, funkce (k, v) ($ ("#" + k) .addClass (" chyba"); // výstraha (k );));)), "json");));));Html
PHP
// přijetí dat přijatých přes ajax $ arr = $ _POST; $ arr = $ _POST; if (filter_var ($ arr, FILTER_VALIDATE_EMAIL) && filter_var ($ arr, FILTER_VALIDATE_INT)) (echo json_encode (pole ("stav" => 1, "html" => "V tomto článku jsou příklady kódu, které používám k odeslání ajax požadavky na server přes jQuery... Jejich úkoly mohou být různé, takže pro ně můžete používat různé funkce, které zjednodušují psaní kódu.
Dotaz na html data pomocí funkce Load
Toto je nejjednodušší ajax požadavek prostřednictvím jQuery, načtení html dat a jejich vložení do prvku dom s id = "result" (obsah prvku je nahrazen):
$ ("# výsledek"). načíst ("
Pokročilejší případ použití pro zatížení:
$ ("# výsledek"). načíst ("
V tomto příkladu jsou parametry také předány serveru a po obdržení odpovědi se kontroluje, zda nedošlo k chybě (například nebyla přijata odpověď ze serveru) a provádějí se různé akce.
Požadavky Ajax s funkcemi GET a POST
Tyto funkce odesílají požadavek ajax pomocí metod get a post http. Zde je několik příkladů jejich použití.
$ .get ("
Přenos dat je volitelný, stejně jako provedení jakýchkoli akcí po obdržení odpovědi ze serveru, tzn. v tomto případě lze řádky 3 a 4-6 v případě potřeby smazat a kód tak dále zkrátit.
Typ dat přijímaných ze serveru lze určit přidáním dataType (viz níže) - ve výchozím nastavení se určuje automaticky.
Použití příspěvku je podobné, ale v následujícím příkladu používám volání funkce po obdržení odpovědi ze serveru.
$ .post ("
Ve skutečnosti jsou funkce get a post zkrácené verze funkce ajax, o které budu diskutovat níže.
Získávání dat json pomocí getJSON
getJSON je zkrácená verze požadavku ajax využívající metodu GET a přijímání dat ve formě json. Metoda je vhodná např. získat nějaké pole s daty a následně s nimi pracovat.
$ .getJSON (" Na straně serveru program vytvoří pole a převede ho na řetězec json, například takto: $ arr = pole (); $ arr = pole ("id" => 10, "text" => "testovací řádek 1"); $ arr = pole ("id" => 20, "text" => "testovací řádek 2"); $ arr = pole ("id" => 30, "text" => "testovací řádek 3"); echo json_encode ($ arr); Stejným způsobem můžete přenést objekty stdClass ze serveru tak, že je převedete na řetězec json. Nyní uvedu příklad jednoduchého požadavku get s funkcí ajax a získáváním html dat. $ .ajax ((url: " Požadavek na server se provádí metodou get-metod, since parametr odpovědný za typ požadavku, typ je standardně roven GET. Příklad vytvoření požadavku funkcí ajax s přenosem dat metodou post a zpracováním událostí. Popíšu níže Extra možnosti, které se používají nejčastěji. $ .ajax ((url: " Tlačítko Odeslat data:
Ve výše uvedeném příkladu se po stisku tlačítka nejprve změní stav tlačítka (text na něm se změní na „Odesílání...“ a stane se neaktivním), což se provádí pomocí parametru beforeSend. Poté je odeslána žádost s přenosem požadovaných údajů. Po obdržení odpovědi ze serveru se stav tlačítka vrátí do předchozího stavu (text se změní na "Odeslat", stane se aktivním). Odpověď je přijata jako data json. Stručně popíšu parametry pro odeslání ajax požadavku, které se nejčastěji mohou hodit: Níže jsou uvedeny některé další příklady použití požadavků ajax. Ukázkový html kód formuláře:
Jednoduchý ajax požadavek přes jQuery s funkcí AJAX
Složitější příklad požadavku ajax přes jQuery
url
Adresa pro odeslání požadavku Ajax
typ
Způsob odeslání požadavek GET nebo POST
data
Data odeslána na server. Může to být řetězec s parametry a jejich hodnotami ve formátu par1 = hodnota1 & par2 = hodnota2 & ..., objekt jQuery, například $ ("vstup") nebo jiná data.
datový typ
Typ dat přijatých ze serveru. Může to být html, json, text, skript a xml.
mezipaměti
Ukládání požadavku do mezipaměti prohlížeče (false - neukládat do mezipaměti).
asynchronní
Asynchronní provedení požadavku, tzn. program pokračuje v provádění, aniž by čekal na odpověď serveru. Pokud zadáte false, bude požadavek proveden synchronně a stránka nebude na nic reagovat, dokud neobdrží odpověď ze serveru.
zpracovat data
Převod odeslaných dat do formátu url. Pokud nechcete, aby se data převáděla, nastavte na false. Například při odesílání obrázku na server nebo xml dat.
typ obsahu
Typ přenášených dat, ve výchozím nastavení "application / x-www-form-urlencoded; charset = UTF-8". Pokud zadáte false, nebude typ předán v hlavičce, což může být nutné například při odesílání obrázku na server.
před Odeslat
Funkce, která se má provést před odesláním požadavku ajax.
kompletní
Funkce, která se má provést po obdržení odpovědi ze serveru (buď úspěšné nebo ne).
úspěch
Funkce, která se má provést, když je požadavek úspěšný.
chyba
Funkce, která se má provést při chybě.
Odeslání formuláře se všemi daty ajax požadavku přes jQuery
JavaScript kód:
$ ("# myform"). Odeslat (funkce (e) (e.preventDefault (); $ .ajax ((typ: $ (this) .attr ("metoda"), url: "
Chcete-li zabránit opětovnému načtení stránky po kliknutí na tlačítko „odeslat“, nejprve zrušte standardní akce prohlížeče pomocí e.preventDefaults () .
V parametru data předáme všechna pole formuláře pomocí $ (toto) .serialize ()- tato funkce převede všechny vstupy a výběry na řetězec vhodný pro odeslání na server.
Také se zde používá parametr async: nepravda takže dokud není formulář odeslán na server, nelze kliknout ani provést nic jiného.
Odeslání obrázku nebo souboru žádostí ajax přes jQuery
Úkol odeslat soubor nebo obrázek na server bez opětovného načtení stránky se vyskytuje poměrně často. V tomto příkladu budu analyzovat 2 čipy najednou: výběr souboru stisknutím tlačítka, které lze zarámovat, jak chcete, a zobrazení průběhu při přenosu souboru na server s požadavkem ajax.
html kód bude vypadat takto:
#addfile (pozice: relativní; přetečení: skryté; šířka: 180px; výška: 34px;) #load_file (pozice: absolutní; nahoře: 0; vlevo: 0; šířka: 180px; výška: 34px; velikost písma: 0px; neprůhlednost : 0; filtr: alpha (neprůhlednost: 0);) #load_file: hover (kurzor: ukazatel;)
Myšlenka je taková, že v horní části tlačítka se zobrazí standardní vstup pro výběr souboru, ale je zcela průhledný a má stejné rozměry jako tlačítko. Uživatel tedy tlačítko vidí, ale když na něj najede, ve skutečnosti najede na vstup. V souladu s tím, když klikne na tlačítko, je skutečně stisknut vstup pro výběr souboru. Aby po výběru souboru neblikal kurzor, je velikost písma nastavena na 0px.
Nyní javascriptový kód pro odeslání souboru na server ukazující průběh:
$ (funkce () ($ ("# načíst_soubor"). on ("změnit", načíst soubor);)); function loadfile () ($ ("# addfile span"). html ("0% načteno"); files = $ ("# load_file"). files; var form = new FormData (); form.append ("upload" , soubory); $ .ajax ((url: "
Při nahrávání souboru na server tlačítko zobrazí, kolik % již bylo na server přeneseno. Po dokončení stahování se název tlačítka vrátí tak, jak byl, a hodnota vstupu souboru je nastavena na prázdnou, takže můžete znovu vybrat nový soubor.
Příklad strany serveru v php (na žádost Eugene):
$ zpráva = ""; if (prázdné ($ _ FILES ["nahrát"] ["název"]) || $ _FILES ["nahrát"] == "žádné") ($ message = "Nevybrali jste soubor";) else if ($ _FILES [ "nahrát"] ["velikost"] == 0 || $ _FILES ["nahrát"] ["velikost"]> 9437184) ($ message = "Velikost souboru neodpovídá normám (maximálně 9 MB)";) jinak if ( ($ _FILES ["nahrát"] ["typ"]! = "Obrázek / jpeg") && ($ _FILES ["nahrát"] ["typ"]! = "Obrázek / pjpeg" ) && ($ _FILES ["nahrát "] [" typ "]! =" obrázek / gif ") && ($ _FILES [" nahrát "] [" typ "]! =" obrázek / png ")) ($ zpráva = " Lze nahrávat pouze obrázky JPG, GIF a PNG.";) jinak pokud (! is_uploaded_file ($ _ FILES [" upload "] [" tmp_name "])) ($ message =" Něco se pokazilo. Zkuste soubor nahrát znovu. ";) else ($ ftype = $ _FILES ["nahrát"] ["type"]; $ fname = "newname_image.". ($ ftype == "image / gif"? "gif": ($ ftype = = "image / png"? " png ":" jpg ")); if (move_uploaded_file ($ _ FILES [" upload "] [" tmp_name "], $ _SERVER [" DOCUMENT_ROOT "]." / files /".$ fname)) ($ message = "Obrázek úspěšně načten.";) else ($ message =" Něco se pokazilo Na. Zkuste soubor nahrát znovu. ";)) Konec (zpráva $);
Informace o nahraném obrázku budou obsaženy v $ _FILES ["nahrát"], protože soubor byl přidán skriptem takto: form.append ("nahrát", soubory); V souladu s tím vše, co je od programu php vyžadováno, je zkontrolovat, zda soubor odpovídá očekávaným parametrům, přenést soubor do požadovanou složku(v příkladu do složky souborů) pod požadovaným názvem (v příkladu newname_image) a vrátit prohlížeči odpověď, která se v mém příkladu uživateli jednoduše zobrazí příkazem alert (zpráva);
Situací, ve kterých je možné a dokonce nutné používat ajaxové požadavky, je mnoho a všechny zde nelze analyzovat. Přesto, pokud máte nějaké návrhy, jaké další příklady má smysl sem přidat, napište do komentářů.
Nemohu v žádném případě odeslat nejjednodušší žádost na servlet pomocí jQuery. Ale zároveň, když pošlu přes formulář, tak vše funguje s třeskem. Níže je index.html, ze kterého chci odeslat uživatelské jméno. login.js, ve kterém tvořím samotný požadavek, SerletStore.java samotný servlet. A struktura celého projektu.
login.js Jediná víceméně funkční url = "http: // localhost: 8080 / testservlet / post" a "/ testservlet / post", "testservlet / post", "/ post", "post" způsobují chybu 404.
Funkce addNewVoting () (var xhr = new XMLHttpRequest (); var body = "name =" + encodeURIComponent ("jméno") + "& příjmení =" + encodeURIComponent ("příjmení"); xhr.open ("POST", " http : // localhost: 8080 / testservlet / post ", true) xhr.setRequestHeader (" Content-Type "," application / x-www-form-urlencoded ") xhr.send (body);); function addNewVoting1 () (var user = ("firstName": "vlad") var JSONString = JSON.stringify (uživatel); var url = "http: // localhost: 8080 / testservlet / post"; $ .ajax ((url : url, metoda: "post", data: JSONString, contentType: "application / json", chyba: funkce (zpráva) (var JSONObject = JSON.parse (zpráva); console.log (JSONObject);), úspěch: funkce (data) (var JSONObject = JSON.parse (data); console.log (JSONObject);), hlavičky: ("Accept": "application / json", "Accept-Language": "en", "Cache-Control ":" max. věk = 3600 "))););
Když je volána druhá funkce, vypíše toto:
index.html
ServletStore.java
Import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.io.PrintWriter; @WebServlet (name = "post", urlPatterns = "/ post") public class Servlet rozšiřuje HttpServlet (@Override protected void doGet (HttpServletRequest req, HttpServletResponse resp) vyvolá ServletException, IOException (PrintWriter Writer = print) ("Ahoj"); @Override protected void doPost (HttpServletRequest req, HttpServletResponse resp) vyvolá ServletException, IOException (super.doPost (req, resp);))
Struktura projektu.
Lekce, ve které na příkladech vytvoříme jednoduché asynchronní požadavky AJAX na server. Jako metodu pro přenos požadavků použijeme jak metodu GET, tak metodu POST. Na serveru budeme požadavky zpracovávat pomocí PHP skriptů.
Co je asynchronní požadavek AJAX?
Technologie AJAX se používá hlavně k odesílání asynchronních požadavků na server. Asynchronní požadavek je požadavek, který běží na pozadí a nezasahuje do interakce uživatele se stránkou.
Při odesílání asynchronního požadavku nedojde k „zamrznutí“ prohlížeče (stránky), tzn. s ní, stejně jako předtím, můžete pracovat. Ale jak potom víte, kdy přijde odpověď ze serveru. Chcete-li to zjistit, musíte sledovat vlastnost readyState prohlížeče. Tato vlastnost obsahuje číslo, podle jehož hodnoty můžete posoudit, v jaké fázi se požadavek nachází. Následující tabulka shrnuje základní hodnoty vlastnosti readyState a jejich odpovídající stavy.
Tito. ukázalo se, že musíme sledovat, kdy je hodnota vlastnosti readyState 4. To bude znamenat, že ze serveru přišla odpověď na odeslaný požadavek. Zbytek hodnot se v praxi používá jen zřídka a některé prohlížeče je nemusí podporovat.
Chcete-li určit, v jaké fázi se požadavek nachází, musíte použít událost onreadystatechange objektu XMLHttpRequest. K této události dochází vždy, když se změní hodnota vlastnosti readyState. V handleru této události (nejmenované nebo pojmenované funkce) tedy můžete napsat akce, které zkontrolují, zda je tato vlastnost rovna 4 a pokud ano, pak například zobrazí odpověď serveru na stránce.
Vytvoření asynchronního požadavku AJAX (metoda GET)
Zvažme vytvoření asynchronního požadavku AJAX pomocí příkladu, který uživatele pozdraví a po načtení stránky zobrazí jeho IP adresu.
Chcete-li to provést, musíte na serveru vytvořit 2 soubory v jednom adresáři:
- welcome.html - HTML stránka, která se zobrazí uživateli. Na stejnou stránku umístíme skript, který provede všechny potřebné akce, aby AJAX fungoval na straně klienta.
- processing.php - PHP soubor, který zpracuje požadavek na straně serveru a vytvoří odpověď. Vývoj začněme vytvořením základní struktury souboru welcome.html.
Příklad práce s AJAXem
Podívejme se na posloupnost akcí, které je třeba provést na straně klienta (v kódu JavaScript):
- Způsob, kterým bude požadavek odeslán na server (GET, POST).
- Adresa URL, která zpracuje požadavek na serveru.
- Typ požadavku: synchronní (false) nebo asynchronní (true).
- Uživatelské jméno a heslo, pokud je požadováno.
Přihlaste se k odběru události onreadystatechange objektu XHR a zadejte obslužnou rutinu jako anonymní nebo pojmenovanou funkci. Poté uvnitř této funkce vytvoříme kód, který bude kontrolovat stav odpovědi a provádět určité akce na stránce. Odpověď, která přichází ze serveru, je vždy ve vlastnosti responseText.
Kromě kontroly hodnoty vlastnosti readyState s číslem 4 můžete zkontrolovat hodnotu vlastnosti status. Tato vlastnost určuje stav požadavku. Pokud je 200, tak je vše OK. V opačném případě došlo k chybě (například 404 – URL nenalezena).
Odešleme požadavek na server pomocí metody send ().
Pokud k odeslání požadavku použijeme metodu GET, pak předáme data do parametru tato metoda není třeba. Jsou předávány jako součást adresy URL.
Pokud k odeslání požadavku použijeme metodu POST, pak je třeba data předat jako parametr metodě send (). Před voláním této metody je navíc nutné nastavit hlavičku Content-Type, aby server věděl, v jakém kódování mu požadavek přišel, a mohl jej dešifrovat.
Připravíme si data potřebná k provedení požadavku na serveru. Pokud nejsou k provedení dotazu na serveru potřeba žádná data, lze tuto fázi přeskočit.
Vytvořme proměnnou, která bude obsahovat instanci objektu XHR (XMLHttpRequest).
Pojďme nastavit požadavek pomocí metody open ().
Jsou uvedeny následující parametry:
Obsah elementu skriptu:
// 2. Vytvořte požadavek na proměnnou var request = new XMLHttpRequest (); // 3. Nastavení požadavku request.open ("GET", "processing.php", true); // 4. Přihlášení k odběru události onreadystatechange a její zpracování pomocí anonymní funkce request.addEventListener ("readystatechange", funkce () (// pokud stavy požadavku jsou 4 a stav požadavku je 200 (OK)), jestliže ((požadavek. readyState == 4) && (request.status == 200)) (// například zobrazte objekt XHR v konzole prohlížeče console.log (požadavek); // a odpověď (text) přijatou ze serveru v alert console.log (request.responseText) ; // získání prvku c id = welcome var welcome = document.getElementById ("welcome"); // nahraďte obsah prvku odpovědí ze serveru welcome.innerHTML = request .responseText;))); // 5. Odeslání požadavku na server request.send ();
V důsledku toho bude mít soubor welcome.html následující kód:
Příklad práce s AJAXem
Na serveru (pomocí php):
- Pojďme získat data. Pokud jsou data odesílána metodou GET, pak z globálního pole $ _GET ["název"]. A pokud jsou data přenášena metodou POST, pak z globálního pole $ _POST ["název"].
- Pomocí těchto dat provedeme na serveru nějaké akce. V důsledku toho dostaneme nějakou odpověď. Pojďme to opakovat.
Vytvoření asynchronního požadavku AJAX (metoda POST)
Upravme výše uvedený příklad. Nyní bude po kliknutí na tlačítko proveden požadavek AJAX na server. Přijme jméno, které uživatel zadal do vstupního prvku, a odešle jej metodou POST na server. Po obdržení odpovědi ze serveru jím nahraďte obsah prvku div na stránce.
Příklad práce s AJAXem
