Tak AJAX AJAX a AJAX, to je to, co děláme v těchto dnech intenzivně. To šetří čas, zvyšuje dynamiku a dává vám pocit pomocí softwarové aplikace druh pocit. Tam jsme mnoho způsobů, jak používat AJAX s mnoha knihoven. Ale jak můžete vidět na tomto webu je pro jQuery, podíváme se na základní nebo možná některých vyspělých zvyklostem AJAX.
Co potřebujeme?
jQuery knihovnu (samozřejmě)
Malý PHP skript
Pojďme se začalo mluvit. V jQuery, tam jsou v podstatě 6 typů metodou dělat AJAX operace. Jedná se o
- $. Ajax (možnosti)
- $. Get (url, data, callback)
- $. GetJSON (url, data, callback)
- $. GetScript (url, callback)
- zatížení (url, data, callback)
- $. Příspěvek (url, data, zpětné volání,
Na rozdíl od čísla 1, všechny ostatní metody používají $. Ajax interně. Takže to znamená, že $. Ajax () je naše matka funkce pro jQuery operace AJAX. Pojďme se podívat na to, jak $. Ajax () vypadá
msg ) ; } } ) ; Odpověď "+ msg);}});
To je dost, že. Parametr typu se "GET" nebo "POST", což znamená, že můžete poslat AJAX requestion jako POST nebo GET (Raději bych POST vždy). Zbytek parametrů je docela srozumitelná, pokud se podíváte na kód znovu.
Teď budeme dělat malý skript, který čte AJAX odkaz na hypertextový odkaz značky (<a>) a načte požadavek na některých div prvků v dokumentu.
Nejprve jsme se normální HTML dokumentu, php, který bude vypadat takto
<DOCTYPE html PUBLIC! "- / / W3C / / DTD XHTML 1.0 Strict / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> <head> <title> Ajax odkaz Test </ title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="jquery-1.2.6.min.js"> </ script> </ Head> <body> </ Body> </ html>
Nyní přidat nějaké odkazy na dokumentu. Pro lepší navigaci druh pohledu budeme používat ul> LI a link. To bude vypadat takto
<ul id="nav"> <li> <a class="ajax_link" rel="div1" href="response.php?user=john"> zátěže ve Div 1 </ a> </ li> <li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> zátěže ve Div 2 </ a> </ li> <li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> zátěže ve Div 3 </ a> </ li> <li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> zátěže ve Div 4 </ a> </ li> </ Ul>
Jak můžete vidět, jsme dali odkazy v seznamu prvků uvnitř Jednoduchý seznam objektu. Podívejte se blíže na visačky <a> vlastností. Máme href, třídy a atributu rel, která vypadá nic jiného než normální odkaz. Pokud víte, jsme s ohledem na atribut rel některých div jména sice div1 a div2 .. tak dále. To znamená, že chceme, aby odpověď na href, které chcete vložit do těchto tagů Div. Jak na to? Dodejme, ty tagy Div první
<span> DIV -1 </ span> <div id="div1" class="content_loader"> </ div> <span> DIV -2 </ span> <div id="div2" class="content_loader"> </ div> <span> DIV -3 </ span> <div id="div3" class="content_loader"> </ div> <span> DIV -4 </ span> <div id="div4" class="content_loader"> </ div>
A reálná část nyní - jsme dali odkazy třída "ajax_link". Zmíníme pouze dynamicky Ajax akce jen odkazy, které mají název třídy s názvem "ajax_link". Sakra, nemáme všechny odkazy na stránky, aby Ajax akce, ne?
Takže na dokumentu zatížení bychom to udělat.
. ready ( function ( ) { $ (Document). Ready (function () { ) . click ( function ( ) { $ ("A.ajax_link"). Položku (function () { this ) ; $ Current_link = $ (this); $. Ajax ({ , Typ: "příspěvek", ( "href" ) , url:. $ current_link attr ("href"), ( e ) { Úspěch: function (e) { + $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (. "#" + $ Current_link attr ("rel")) html (e); } }); ; return false; }); });
Dovolte mi vysvětlit, scénář trochu. Document.ready událost je událost, která se spouští při načtení stránky. A pak jsme přiřadit nějaké kódy na událost click vztahů, kteří mají třída "ajax_link". Přitom $ current_link = $ (this); umožňuje mít aktuální odkaz na objekt musí být k dispozici v rámci funkce zpětného volání. A my máme
$ ("#" + $ Current_link.attr ("rel")). Html (e)
což znamená $ ("div_id"), html (server_response) a vytvořili jsme url param z funkce $ ajax dynamicky s URL: a. $ current_link.attr ("href"). Takže teď všechny tyto prostředky "Všechny ty odkazy, které mají" třídy "- ajax_link Přidat klikněte zpracování události - a pak spustit a AJAX požadavek brát odkazy href poperty a nahrát odpověď do div, jehož id odpovídá" rel "atribut propojení ". A return false zabrání odkaz práci jako normální odkaz 
Chceš vidět akci? Tady to jde.
A můžete si stáhnout zdrojový kód stejně.
V další části tohoto malého tutoriálu budeme používat stejnou věc, ale s trochou pohodlí.
Použití snazší metodu
Vše zůstává téměř stejné. Budeme jen změnit způsob ajax zde. Takže místo psaní celé dolarů. Ajax blok můžeme dosáhnout stejnou věc s následujícími.
. ready ( function ( ) { $ (Document). Ready (function () { ) . click ( function ( ) { $ ("A.ajax_link"). Položku (function () { + $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (. "#" + $ (This) attr ("rel")) zatížení ($ (this) attr ("href").); ; return false; }); });
Je to mnohem méně komplikovaná, ne? Zatížení metoda načte ajax obsahu v prvku to připojen. Pokud $ ("# somediv_id"). Zatížení ("mypage.php"), bude se snažit načíst mypage.php je obsah v něm. Docela jednoduché, že? Ale doporučuji si zvyknout na hlavní metodou (viz první část).
V zip souboru je tu další soubor s názvem ajax2.php která ukazuje tento Methos, který má stejný výsledek.
Takže, AJAX, není tak těžké, jak to vypadá, že jo? Pokud se stanete velmi plynule s operacemi AJAX, budete vytvářet magii.
Díky za čtení a toxinových zbraní.
Nedávné komentáře