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.
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ý"}';
?>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.
Díky za pěknou ochutnávku. S jQuery jsem zatím nepracoval, ale teď to rozhodně jdu vyzkoušet.
díky za článek
Hezke clanky o Jquery? Mel bych zajem o pokracovani :-) Dekuji
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.
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.
Bezva článek díky.
Taky bych rád za seriál poděkoval. :-)
Pekny serial , zaslouzi pochvalu . Autorovi velke dik
Skvělý tutorial hodně mi pomohl..
Moc pekna serie clanku. Dneskem zacinam pouzivat JQuery kde to pujde. Absolutni nadseni:)
Bezva pochopitelné polopatické s příklady a i pro takové jako jsem já. Dobrý design .Klobouk dolů.
a jde takto posílat / měnit proměnné vyvoláním jq-funkce z (např) index.php bez znovunačtení stránky?
a jde takto posílat / měnit proměnné vyvoláním jq-funkce z (např) index.php bez znovunačtení stránky?
Nemůžu si pomoci ale to s tim test.php mi prostě nejde. Nevyhodí to žádnej alert.
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?;)
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
Dik moc! Konečne viem čo to je. V Aj by som si na to netrúfol.
A to jsem se jQuery bál?už nemusím :) krásný seriál díky
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!
Perfektný seriál, díky moc :)
Krásná ukázka ideálního představení!
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/
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.vyhodnoceni.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.vyhodnoceni.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/??
pro Neas:
A posíláš na začátku skriptu hlavičku? header(?Content-Type: text/html; charset=utf-8?);
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 *]
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.
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? });
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
V zkoušečce píšete, že např. seznam.cz nejde načíst. Ale třeba v IE6 to lze načíst normálně.
To vypadá, že výstup je který umí zpracovat .get je ve formátu JSON?
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 :)
Ďakujem autorovi za výborný seriál. Dobrá práca. Ak bude ďalší diel, určite si ho nenechám ujsť :)
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.
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
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
wow?toto je revolucna novinka v mojich znalostiach diki !!! -D
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!
Dik
Chtěl bych moc poděkovat za tutoriály. Původně jsem se o Jquery nezajímal, ale už jsem změnil názor;)
Díky, jen pokračuj :)
data která lezou z php skriptu jsou v JSON ? chápu, lze nějak snadno realizovat pro XML výstup ?
Díky za článek, je to dobrý základ.
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é!
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(?test.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
Super, díky, konečně mám představu, jak na jQuery :)
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!
