© 2013 All rights reserved.
5

jQuery: Examples 3 – Ajax

Několik příkladů pro použití technologie Ajax pomocí knihovny jQuery.

JavaScriptová knihovna jQuery disponuje množstvím funkcí, podporujících technologii Ajax, a jako obvykle nám práci s JavaScriptem velmi usnadňuje.

Load

První a nejjednodušší funkce, se kterou se v knihovně jQuery můžete setkat, je funkce Load. Jak už název funkce napovídá, funkce načítá data. Načítat data můžete do libovolného elementu ve stránce, pouhým voláním funkce nad elementem s příslušnými parametry.

Load obsahuje maximálně tři parametry, z nichž nejdůležitější je právě ten první, který určuje adresu, která bude pro load použita.

Druhý parametr je nepovinný a může obsahovat data, která budou spolu s požadavkem poslána na server. Poslední parametr je jako obvykle callback funkce.

Spolu s funkcí Load zmíním ještě funkce, které mohou být užitečné pro určité debugování Ajaxu v jQuery, a to jsou funkce pro jednotlivé události:

  • ajaxComplete – provede se po dokončení požadavku
  • ajaxError – provede se v případě nesplění požadavku
  • ajaxSend – provede se při odeslání požadavku
  • ajaxStart – provede se při startu požadavku (není stejný jako ajaxSend)
  • ajaxStop – provede se po dokončení všech požadavků
  • ajaxSuccess – provede se při úspěšném dokončení požadavků

Všechny tyto funkce obsahují jediný parametr a to callback funkci, která může například vypisovat stav provádění.

V příkladu si vytvoříme několik odkazů, na které po kliknutí nepřejdeme, ale pomocí knihovny jQuery je budeme načítat do elementu na stránce. Div s odkazy bude mít ID ajax_urls, abychom mohli jednoduše odlišit událost kliknutí pouze na tyto odkazy. Zjištěním jejich hodnoty atributu href můžeme provést načtením:

Celý JavaScriptový handler může vypadat například takto:

Příklad můžeme doplnit o výpis stavu požadavku pomocí zmíněných funkcí:

Celý příklad může vypadat následně:



image 1

jQuery.get, jQuery.post

Na jednoduché načítání si sice vystačíte s funkcí Load, ale na pokročilejší požadavky vám určitě stačit nebude. Funkce sice umožňuje jednoduché odesílání dat, kromě samotného načtení, ale pro snadnější prácí nabízí jQuery rozšíření v podobě dvojice funkcí, které slouží primárně pro odesílání hodnot, a to metodou GET nebo POST, jak jejich názvy vypovídají. Obě funkce a jejich ovládání jsou identické, liší se pouze v použité metodě při odesílání.

Použití bude zřejmé na příkladu. Vytvoříme si jednoduchý formulář, který se bude pomocí Ajaxu a metody Get odesílat.

 

Vytvoříme si jednoduchý formulář s jedním inputem, který bude sloužit pro zadání čísla. Toto číslo se odešle na server, který jej následně zpracuje (v našem případě zformátuje pomocí number_format) a vrátí zpět.

 

JavaScriptová část bude velmi jednoduchá. Musíme načíst hodnotu z inputu po odeslání formuláře a tuto hodnotu pomocí Ajaxu odešleme na server (pomocí metody GET). Výsledek, který server vrátí zpracujeme pomocí callback funkce:

Div „numbers“ obsahuje výsledné hodnoty zformátovaného čísla.

Serverová část pouze zpracuje vstupní hodnotu z pole GET:

Důležité je zde použití funkce $.get, která obsahuje čtyři parametry:

  • volaný soubor pro zpracování parametrů
  • odesílaná data se správnou strukturou (name: value)
  • callback funkce
  • udává typ dat: xml, html, …, které jsou vráceny callback funkcí. Parametr je nepovinný

Celý příklad si můžete zobrazit zde:



image 1

jQuery.ajax

Pokud si nevystačíte ani s funkcemi get a post, můžete využít této globální funkce, která je základem pro celé zpracování Ajaxu v jQuery a nabízí velké možnosti nastavení.

Funkce má jeden jediný parametr – options, který umožňuje zadávat nastavení pro zpracování metodou klíč: hodnota.

Opět vysvětlím na jednoduchém příkladu:

V tomto případě je vytvořena událost pro kliknutí na odkazy. V případě že bude na odkaz kliknuto, skript odešle požadavek na soubor test.php, což je nastaveno klíčem url, metodou get – klíč type.

Klíčů, kterými můžete nastavení Ajaxu ovlivnit je velké množství, uvedu alespoň ty nejdůležitější:

Klíč Hodnota
url: Url adresa požadavku.

type: typ odesílaných dat (GET, POST). Hodnota ‚GET je výchozí.

success: funkce volaná po vykonání požadavku. Funkce může obsahovat dva parametry:

  • data vrácená požadavkem
  • status vykonání ajaxu
dataType: typ dat, vrácených serverem (xml, html, json, …)

data: data odsílaná na server, podobně jako u funkce post a get.

beforeSend: možnost definování funkce před odesláním

cache: možnost nastavení cache – true/false

Klíče a možné hodnoty v $.ajax

Můžeme si opět vytvořit jednoduchý příklad, kde si funkčnost ukážeme.

Ukázkový příklad bude obsahovat jeden select, ve kterém budeme mít možnost vybrat si z několika hodnot, po vybrání možnosti kliknutím na odkaz možnost zvolíme a odešleme požadavek na server. Jako hodnota $_GET[‘name’] budeme chtít, aby serveru byla odeslána hodnota z našeho selectu.

V poslední fázi vypíšeme vrácená data:

Nejprve jsme si zjistili hodnotu ze selectu, který má name themes. Následně odešleme náš požadavek.

V nastavení si nastavíme metodu GET (nemusíme nastatovat, je výchozí), url adresu pro odeslání požadavku, odesílaná data a typ navrácených dat.

Jako rozšíření jsme vytvořili funkci pro událost beforeSend, která se volá před samotným odesláním požadavku a nakonec funkci pro success, která se volá po dokončení požadavku.

Na serveru dle hodnoty v selectu (1-4) vrátíme obrázek dle této hodnoty:

Celý příklad si můžete zobrazit zde



image 1

Závěrem

jQuery nabízí pro využití technologie Ajax mnohem více. Tří příklady uvedené v tomto článku jsou pouze základní použití, detailnější informace zmíním příště.

Comments (5)

Prosím tě, můžeš mi dát malou ukázku kódu, kdy se po výběru option v selectu předá nějaká hodnota option do php skriptu který je v jiném souboru? Bez použití buttonu. Trápím se s tím už dva/tři dny a pořád na to nemůžu přijít, jediné na co jsem přišel, že se mi vypíše ihned po výběru option její value do té samé stránky

Děkuji

A jak odeslu neco pres POST? vsechny priklady jsou pomoci GET

Uplne stejne jako pres GET, nauc se cist.

Po tom $.ajax({

})

je voláno

return false;

Kvůli čemu to je?

Ivo protože si píča, a nemáš se na co ptát. Demente skurvený!

Add comment

About
Hi, i am programmer from the Czech Republic. I love web development (Ruby, Ruby on Rails, PHP, Nette) and iOS development (Objective-C, Cocoa).
To cooperate, here is my phone:
+420 608 836