jQuery AJAX základy příklady

Žádný php programátor se dnes bez znalosti JavaScriptu neobejde. Naštěstí už dávno není potřeba dávat tolik pozor na to, aby JS fungoval v každém prohlížeči stejně, protože o toto se stará rozšíření jQuery. Tvoříme tedy příkazy JS, ale pomocí nadstavby jQuery.

jQuery knihovna

Chcete-li nepatrně ušetřit zátěž vašeho serveru, můžete knihovnu načítat třeba z Google API’s
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Knihovnu je dnes již vhodné načíst v podstatě vždy. Kód umístěte do hlavičky stránky. Načítáme minimalizovanou verzi bez mezer, protože není potřeba se ve zdrojovém kódu hrabat.

 

Selektory

Vybírání prvků stránky je srdcem jQuery. Oproti standardnímu výběru prvků přímo v JavaScriptu je jQuery jednodušší.

document.getElementById("nadpis")  v.s.  $('#nadpis')

Nejběžněji se používají následující selektory:

 $('#nadpis') … výběr prvku kde id=“nadpis“
$('.nadpis') … výběr prvků kde class=“nadpis“
$('p')  … cyklický výběr všech tagů p (paragraf)
$(this) … aktuální prvek
$('tr:even') … výběr všech sudých řádků tabulky
$('tr:odd') … výběr všech lichých řádků tabulky
$(':button[id="tlacitko1"]') … tlačítko id=“tlacitko1″

Selektory lze zobecnit, resp. rozčlenit na výběr podle tagu, třídy, id, názvu atributu, hodnoty atributu a filtry.
Existují rozmanité způsoby výběrů prvků stránky.

$('p,div') … zde vybíráme všechny p a div tagy na stránce
$('p a') … a tag uvnitř p tagu
$('p > a'  … a je bezprostřední potomek p
$('input[required]') … input tagy s atributem „required“
$('a[href^="https://"]') … tag a kterého „href“ začíná na „https://“   …^ příznak regulárního výrazu
$('a[href*="jQuery"]')  … atribut „href“ obsahující „jQuery“

Filtry – trochu zjednodušují práci, ale působí na začátku zmatečně.

:button … stejné jako input[type=submit], input[type=reset], input[type=button], button
:submit … stejné jako input[type=submit], button[type=submit]
:input
:text  … input[type=text]
:checkbox … input[type=checkbox]
:checked
:radio
:selected
:enabled
:disabled
:visible
:hidden
:file

 

Manipulace s prvky stránky

funkce popis
.html() získej vnitřní HTML, včetně vnořených prvků
.html(novýObsah) nahraď vnitřní HTMLhodnotou novýObsah
.text() získej text bez tagů
.text(novýText) nahraď obsah hodnotou novýText; (nelze vložit tagy)
.append(val) připoj za vnitřní HTML val
.prepend(value) vlož val před vnitřní HTML
.before(val) vlož  val před tag aktuálního prvku; val může být HTML prvek
.after(val) přidej val za uzavírací tag
.remove() odstraň daný prvek
.empty() odstraň vnitřní HTML
.replaceWith(value) nahraď prvek hodnotou val
.wrap(tag) uzavři dané prvky mezi tag
.warpInner(tag) uzavři vnitřní HTML mezi tag
.unwrap() odstraň vnější uzavírací tag daného prvku

 

Obsluha událostí

Údálostí je celá řada. Jmenovitě například dokončení načítání prvků stránky, kliknutí uživatele na prvek stránky, přejetí myší nad prvek, odetí myší z prvku, odeslání formuláře, stisknutí klávesy …

.ready()
.click()
.mouseover()
.mouseout()
.submit()
.keypressed()

Když už víte, jak vybrat nějaký prvek na stránce, můžete k němu přiřadit událost.
$('#akce').click() … zde u prvku s id=“akce“ dojde po kliknutí na tento prvek ke spuštění funkce; funkce se většinou vepisuje přímo do kulatých závorek

Události lze vázat na selektor též pomocí .on()

Přehled událostí a k čemu se vztahují

document .ready() DOM struktura stránky byla sestavena.
.load() Byla nahrána kompletně celá stránka včetně obrázků.
.unload() Uživatel kliknul na odkaz nebo zavřel panel se stránkou.
window .resize() Uživatel mění velikost okna.
.scroll() Uživatel scrolluje.
mouse .click()
.dblClick()
Kliknutí
nebo dvojité kliknutí.
.mousedown()
.mouseup()
Tlačítko myši bylo stisknuto,
resp. uvolněno.
.mouseover()
.mouseout()
Ukazatel myši je nad daným prvkem,
resp. z něj odešel.
.mousemove() Myš šmejdí v rozsahu daného prvku. Získáváme (x, y) souřadnice ukazatele.
key .keypress() Datel stisknul klávesu.
.keyup()
.keydown()
Stisknutí resp. uvolnění konkrétní klávesy.
Chcete-li vědět, o kterou se jedná …
var key = String.fromCharCode(event.which);
form .submit() Odeslán formulář <input type="submit">
.reset() Resetován formulář <input type="reset">
.change() Změna výběru – týká se těchto formulářových prvků: checkbox, radio, drop-down menu
.focus()
.blur()
Vstupní prvek získává, resp. ztrácí zaměření na formulářové políčko.

Zjednodušení mouseover() a mouseout() pomocí hover()

hover() sjednocuje obě události do jedné a sice tímto způsobem: .hover(function(), function()). První funkce obstarává mouseover událost, druhá funkce mouseout.

Objekt událost

target Zdrojový prvek spustil událost.
pageX, pageY (x, y) okna prohlížeče
screenX, screenY (x, y) monitoru
which Číselný kód stisknuté klávesy.
String.fromCharCode(evt.which)
shiftkey true pokud je stisknutý shift
data data předaná z .on(events, selector, data, handler).

Vykonání výchozí fukce prvku stránky lze zamezit použitím příkazu event.preventDefault().
Řekněme, že máme odkaz, ale po kliknutí na něj nechceme nikam přejít, nýbrž zobrazit třeba div tag s nějakým obsahem.

Po kliknutí na odkaz je nejprve vložen text a následně pomocí příkazu show() zviditelněný tag s obsahem.

 

 

Vizuální efekty

zobrazit
v.s.
skrýt
.hide() skrýt zvolený prvek
.show() zobrazit zvolený prvek
.toggle() přepnout stav (je-li skrytý, zobrazit, je-li zobrazený, skrýt)
postupná
změna
.fadeIn() zobrazit skrytý element přechodem
.fadeOut() skrýt
.fadeToggle() přepnout stav
.fadeTo() přechod na konkrétní úroveň průsvitnosti (0 až 1)
posun .slideDown() zobrazit prvek přesunem dolů
.slideUp() skrýt prvek přesunem nahoru
.slideToggle() přepnout stav

Funkce pro vizuální efekty mají dva argumenty:
1) doba animace v milisekundách
2) callback funkce (funkce, která se má vykonat po dokončení animace)

V příkladu výše si povšimněte, že selektor $(‚p‘) provádí cyklický výběr všech tagů p. Každý tak volá zvlášť, takže je funkce „hotovo“ aktivována jedním řádkem kódu 3x. Na to pozor. Je to v praxi trochu matoucí.

 

AJAX

Nastudování a praktické vyzkoušení následujícího příkladu vám ušetří hodně nervů při prních hrátkách s AJAXem.

V php souboru se většinou zpracovávají dotazy na databázi. Bylo by samozřejmě hloupé provádět výpočty tak jako v ukázce výše. Příklad však skvěle odhaluje, jak probíhá komunikace pomocí AJAXu.

Jak předávat objekty? … JSON

JavaScript Object Notation slouží primárně k přenosu serializovaných dat/objektů. Data je nejprve nutné převést na řetězec a po přenosu zpět na objekt. Řetězec lze jednoduše předat v jedné proměnné a na druhé straně deserializovat zpět na objekt. JSON je pouze syntaktický rámec pro přenos dat.

Příklad 1

var data_k_odeslani = [{ "jméno" : "Larry", "příjmení" : "Page", "web" : "google.com", "hodnota" : "" }];

Příklad 2

var data_k_odeslani = [{
"id": "1",
"název": "kalendář 1",
"obrázek":
{
"url": "obrazky/1.jpg",
"width": 1200,
"height": 1200
},
"náhled":
{
"url": "obrazky/nahledy/1.jpg",
"width": 48,
"height": 48
}
}];

Uvnitř se též mohou vyskytovat pole hodnot uzavřená do hranatých závorek [].

 

Předání dat serveru

Jednou z možností je načtení všech dat zadaných ve formuláři  $('#form').serialize() a serializace do řetězce včetně kódování dat pro přenos odkazem.
Také se používá serializeArray()
$( "form" ).submit(function( event ) {
   console.log( $( this ).serializeArray() );
   event.preventDefault();
});
Jak přesně serializeArray() používat se podívejte do manuálu.

JSON.stringify

 

Získání JSON dat ze severu

var objekt = JSON.parse(json_text);  …

 

Ladění

Tak asi nejlépe přes F12 v Chrome a ve FireFoxu.
Je dobré posílat při ladění zprávy do logu (konzole).

ladění chyb ve Firefoxu
Zapnete-li v konzoli zobrazování XHR dotazů (zde to není vidět, každopádně tlačítko XHR najdete úplně vpravo), uvidíte i předávané parametry, zde zprava=55, nebo také odpověď z php (vedle Parametry přepněte na Odpověď).

 

 

 

Procvičte se: https://www.w3schools.com/jquery/exercise_jq.asp

www3.ntu.edu.sg/home/ehchua/programming/webprogramming/jQuery_Basics.html