rss

jQuery pro začátečníky: AJAX

2. 11. 2008

Pozdě, ale přece. Poslední díl seriálu o jQuery je zde. Tématem se vracím k článku, který jsem napsal téměř přesně před třemi lety. S jQuery můžete ale na ten článek zapomenout. Práce s AJAXem nebyla nikdy jednodušší, dávejte pozor:

$("#ukazkovy").load("/stranka.html");

Myslím, že z příkladu je vše jasné. Do elementu s ID ukazkovy načti stránku stranka.html

Na podobný příklad se podívejte ve zkoušečce.

To je ovšem pouze to nejjednodušší použití, přesto dokáže to samé, jako zdlouhavý příklad na vytvoření vlastního AJAXu z mého staršího článku.

AJAX lze v jQuery použít mnoha způsoby a jQuery má pro něj připraveno několik funkcí. Já používám nejčastěji dvě z nich. První jsem již uvedl výše, to používám hlavně pokud chci prostě načíst někam nějakou stránku. Další zajímavá funkce je $.get(), která umí poslat na soubor nějaká data a další data zase přijmout. Nejdříve si nějaká data pošleme směrem tam:

$.get("test.php", { jmeno: "Petr", prijmeni: "Novak" } );

Právě jsme na stánku test.php poslali proměnnou jmeno s hodnotou Petr a proměnnou prijmeni s hodnotou Novak. Ptáte se k čemu to může být? Co takhle třeba uložení formuláře v pozadí stránky bez toho, aby se znovu načetla? Ve skriptu test.php pak pomocí následujícího zápisu přijmete proměnné a můžete je uložit třeba do databáze:

$jmeno = $_GET['jmeno'];
$prijmeni = $_GET['prijmeni'];

Nyní budeme data přijímat a zpracovávat. Nejdřív příklad:

$.get("test.php", function(vystup){
  alert("Soubor vrátil: " + vystup);
});

Tento příklad zavolá soubor test.php a pokud soubor test.php něco vypíše, budete to mít v proměnné vystup.

Složitější část pro ty, které zajímá, jak si nechat vrátit více jednotlivých dat v různých proměnných

Stačí použít podobnou funkci:

$.getJSON("test.php", function(vystup){
  alert("Jméno je: " + vystup.jmeno + " a příjmení je: " + vystup.prijmeni);
});

Tento příklad zavolá soubor test.php a pokud výstup z tohoto souboru jsou nějaká data ve formátu { prom1: "hodnota", prom2: "jina hodnota"}, tak data pošle do funkce a zpracuje tak šikovně, že je pak můžeme použít jako vidíte právě v příkladu. Ptáte se, jak by měl vlastně soubor test.php asi vypadat? Třeba takto:

<?php
echo '{"jmeno": "Václav", "prijmeni": "Novotný"}';
 ?>

Závěr

Tak to je, milí přátelé, z jQuery vše. Samozřejmě možná ještě o nějakých specialitách tohoto frameworku napíšu (bude-li zájem?). Vězte, že tento seriál je jen špička ledovce zvaného jQuery. Chtěl jsem ho napsat tak, aby ani laika neodradilo si ho přečíst a snad se povedlo. Na konec snad ještě doporučím výborné články o jQuery na Profimagazínu.


Komentáře

Michal

Díky za pěknou ochutnávku. S jQuery jsem zatím nepracoval, ale teď to rozhodně jdu vyzkoušet.

alča

díky za článek

Ruda

Hezke clanky o Jquery? Mel bych zajem o pokracovani :-) Dekuji

Dědek

Mě se články moc líbí, nevěděl jsem kudy do AJAXu a Frameworků a tohle jsem zrovna potřeboval. Děkuju moc.

Dědek

Mě se články moc líbí, nevěděl jsem kudy do AJAXu a Frameworků a tohle jsem zrovna potřeboval. Děkuju moc.

Kibo

Bezva článek díky.

ronny

Taky bych rád za seriál poděkoval. :-)

Martin

Pekny serial , zaslouzi pochvalu . Autorovi velke dik

ErrorTM

Nemůžu si pomoci ale to s tim test.php mi prostě nejde. Nevyhodí to žádnej alert.

ErrorTM

Tak už se mi to povedlo, musel jsem to přesunout před ostatní scripty. Narazil jsem ale na další věc a to, že se neodešlou žádné proměnné (jmeno, prijmeni). Takže alert je nevypíše. (echo ?Jméno: ".$jmeno.? Příjmení: ?.$prijmeni?;)

Boom

Serie clanku zde uvedena je opravdu fajn. Autorovi diky a i me pomohla se do tematu dostat. Myslim ovsem, ze dalsi pokracovani neni potreba. Vse je krasne popsano na materskem webu www.jquery.com

camo

Dik moc! Konečne viem čo to je. V Aj by som si na to netrúfol.

skalda

a jde takto posílat / měnit proměnné vyvoláním jq-funkce z (např) index.php bez znovunačtení stránky?

skalda

a jde takto posílat / měnit proměnné vyvoláním jq-funkce z (např) index.php bez znovunačtení stránky?

Observer

Moc pekna serie clanku. Dneskem zacinam pouzivat JQuery kde to pujde. Absolutni nadseni:)

duta_hlava

Bezva pochopitelné polopatické s příklady a i pro takové jako jsem já. Dobrý design .Klobouk dolů.

Micro

Skvělý tutorial hodně mi pomohl..

Pilotak

A to jsem se jQuery bál?už nemusím :) krásný seriál díky

Linux

Dělat s ajaxem byl děs, tohle je super, hodně mi to ulehčí práci. Díky za nastartování správným směrem!

Adam Libuša

Perfektný seriál, díky moc :)

dev

Krásná ukázka ideálního představení!

Makeš

Gratuluji k perfektně napsanému miniSeriálu. Pokud v tom budeš pokračovat, tak určitě najdeš spoustu lidí co si to přečtou ;)

Pro ty co to s jQuery myslí vážně doporučuji ještě web (AJ) http://www.learningjquery.com/

Martin

Díky moc za článek kdy bych o něm věděl dřív už se jQuery věnuju dávno :D je to super

Pomgoe

V zkoušečce píšete, že např. seznam.cz nejde načíst. Ale třeba v IE6 to lze načíst normálně.

Lweek

To vypadá, že výstup je který umí zpracovat .get je ve formátu JSON?

Robert

Super seriál. Díky moc. Jen by jsi mohl doplnit info, jak Ajaxem posílat proměnné a zároveň data získat.

Je to takto?:

$.get(?test.php?, { jmeno: ?Petr?, prijmeni: ?Novak? }, function(vystup){
alert("Soubor vrátil: " + vystup); });

Nebo takto?:

$.get(?test.php?, function(vystup){
alert(?Soubor vrátil: " + vystup); }, { jmeno: "Petr?, prijmeni: ?Novak? });

NickVK

Zaujímavé je, že keď zadám podľa Texy! obrázok, tak ho v náhľade zobrazí ale po odoslaní príspevku nie :-). Oprav si to.

NickVK

Výborný seriál o jQuery, myslím, že ani chvíľu som nebol vedľa :-). Ďakujem

A myslím, že jQuery úplne vystihuje ich slogan :-) [* http://open-upload.com/?e174e2ba.png *]

Jakub Hejda

pro Neas:

A posíláš na začátku skriptu hlavičku? header(?Content-Type: text/html; charset=utf-8?);

Neas

Mám dotaz: udělal jsem si malý chat pomocí ajaxu a php. Vše funguje jak má, ale když pošlu nějaký informace stránce chat.vyhodnoce­ni.php (obdoba test.php z tohoto článku), vráti mi tato stránka sice to, co má, ale špatně se mi zobrazuje čeština. v index.php, chat.vyhodnoce­ni.php i v databázi mám přitom kódování češtiny. Nevíte někdo, prosím, co to způsobuje, resp. jak to napravit? Zdrojový kód na tomto fóru: http://diskuse.jakpsatweb.cz/??

Lester

data která lezou z php skriptu jsou v JSON ? chápu, lze nějak snadno realizovat pro XML výstup ?

Gimli

Díky, jen pokračuj :)

Jan Knížek

Chtěl bych moc poděkovat za tutoriály. Původně jsem se o Jquery nezajímal, ale už jsem změnil názor;)

Koci

Výborný článek, sháněl jsem úplné základy a našel jsem. Díky těmto běžným příkladům jsem si napsal vlastní menu během několika minut. Děkuji!

Pukar

Dik

Blažej ... spokojny

wow?toto je revolucna novinka v mojich znalostiach diki !!! -D

niobi

Nettopyr [34]: : mysql a výpis si natahnes pres php napr do skryteho divu .. ten si upravis bud php nebo JS(jquery) a pak to jen zobrazis :) resp tak to aspon resim ja .. je mozne ze na to jdu moc slozite, ale zatim jsem neresil nic tak sileneho aby toto reseni neslapalo jak svycarsky hol(d)inky

Nettopyr

Děkuji moc, rozhodně jsem konečně pochopil JQuery a zkusím své staré PHP stránky předělat do jQuery. Pokud mohu přidat nápad, mohl bys zkusit napsat něco o připojení MySQL databáze a výpisu tabulek

Kozoroh

Ahoj, pro ty začátečníky komu to hned nejede, tak jako mě jen upozornění.

Svůj script není možné dávat mezi taky nalinkovaného skriptu jquery. Je potřeba zadat nové tagy skriptu nebo vložit svůj externí skript. Viz. kapitola http://www.jakpsatweb.cz/?cleneni.html ?Jak kombinovat interní a externí zápis?.

Problém je, že konzole chybu nehlásí, takže je to problém někdy odladit.

_CJ_

Určitě bych byl pro napsání dlašího článku? ono by stačili i příklady řešení určitých problémů..z toho si člověk veme nejvic?manual je pekna vec ale nerekne vse :)

jinak dobra prace :)

Matej

Ďakujem autorovi za výborný seriál. Dobrá práca. Ak bude ďalší diel, určite si ho nenechám ujsť :)

Martin

Díky za článek, je to dobrý základ.

HerrZ

Medhi, díky! Dneska jsem se naučil požívat Jquery a Ajax za jeden den. Vesměs v Javascriptu jsem nováček a moc s ním nepracuji, ale základy mi stačí na pochopení a prohloubení znalostí :) Ještě jednou díky, je to suprové!

Vašek

Prosím o radu, potřebuji poslat na server DATA, ale nevím jak poslat proměné, jelikož se formulář generuje dynamicky, mám tedy pole kde klíč je proměná a hodnota je hodnota. Jak by měl vyadat správný zápis, víte prosím?

standardně funguje

$.getJSON(?tes­t.js?, { name: ?John?, time: ?2pm? }, function(json) {
alert("JSON Data: " + json.name + json.time);
});

ale právě tuto část { name: ?John?, time: ?2pm? }

potřebuji dynamicky, mám proměnou

form[name] = ?John?

form[time] = ?2pm?

ale muže se objevit cokoli

form[xxxx] = ?yyyyyyy?

díky moc za typ

Vašek

Lukáš

Super, díky, konečně mám představu, jak na jQuery :)

Martin

Děkuju (dodatečně) za krásnej úvodní seriál, kterej jsem na jeden dech za dopoledne přečetl a jsem ohromně nadšenej a teď hurá na jquery!

sara

http://idateasia.wordpress.com/?sia-reviews/ Hmm, bacha ale na veřejně přístupné stránky ? zejména pokud jde o mazání. Co by s takovým odkazem provedl například Google bot? Ten asi neřeší Javascript a prostě přejde na tu adresu a tedy provede smazání.


Archiv