Tak AJAX AJAX a AJAX, to je to, čo robíme v týchto dňoch intenzívne. To šetrí čas, zvyšuje dynamiku a dáva vám pocit pomocou softvérovej aplikácie druh pocit. Tam sme mnoho spôsobov, ako používať AJAX s mnohými knižníc. Ale ako môžete vidieť na tomto webe je pre jQuery, pozrieme sa na základné alebo možno niektorých vyspelých zvyklostiam AJAX.
Čo potrebujeme?
jQuery knižnicu (samozrejme)
Malý PHP skript
Poďme sa začalo hovoriť. V jQuery, tam sú v podstate 6 typov metódou robiť AJAX operácie. Jedná sa o
- $. Ajax (možnosti)
- $. Get (url, dáta, callback)
- $. GetJSON (url, dáta, callback)
- $. GetScript (url, callback)
- zaťaženie (url, dáta, callback)
- $. Príspevok (url, dáta, spätné volanie,
Na rozdiel od čísla 1, všetky ostatné metódy používajú $. Ajax interne. Takže to znamená, že $. Ajax () je naša matka funkcie pre jQuery operácie AJAX. Poďme sa pozrieť na to, ako $. Ajax () vyzerá
msg ) ; } } ) ; Odpoveď "+ msg);}});
To je dosť, že. Parameter typu sa "GET" alebo "POST", čo znamená, že môžete poslať AJAX requestion ako POST alebo GET (Radšej by som POST vždy). Zvyšok parametrov je celkom zrozumiteľná, ak sa pozriete na kód znovu.
Teraz budeme robiť malý skript, ktorý číta AJAX odkaz na hypertextové prepojenie značky (<a>) a načíta požiadavku na niektorých div prvkov v dokumente.
Najprv sme sa normálne HTML dokumentu, php, ktorý bude vyzerať 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>
Teraz pridať nejaké odkazy na dokumente. Pre lepšiu navigáciu druh pohľadu budeme používať ul> LI a link. To bude vyzerať takto
<ul id="nav"> <li> <a class="ajax_link" rel="div1" href="response.php?user=john"> záťaže vo Div 1 </ a> </ li> <li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> záťaže vo Div 2 </ a> </ li> <li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> záťaže vo Div 3 </ a> </ li> <li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> záťaže vo Div 4 </ a> </ li> </ Ul>
Ako môžete vidieť, sme dali odkazy v zozname prvkov vo vnútri Jednoduchý zoznam objektu. Pozrite sa bližšie na visačky <a> vlastností. Máme href, triedy a atribútu rel, ktorá vyzerá nič iné ako normálny odkaz. Ak viete, sme s ohľadom na atribút rel niektorých div mená síce div1 a div2 .. tak ďalej. To znamená, že chceme, aby odpoveď na href, ktoré chcete vložiť do týchto tagov Div. Ako na to? Dodajme, tie tagy Div prvý
<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álna časť teraz - sme dali odkazy trieda "ajax_link". Spomenieme len dynamicky Ajax akcie len odkazy, ktoré majú názov triedy s názvom "ajax_link". Sakra, nemáme všetky odkazy na stránky, aby Ajax akcie, nie?
Takže na dokumente zaťaženie by sme to urobiť.
. ready ( function ( ) { $ (Document). Ready (function () { ) . click ( function ( ) { $ ("A.ajax_link"). Položku (function () { this ) ; $ Current_link = $ (this); $. Ajax ({ , Typ: "príspevok", ( "href" ) , url:. $ current_link attr ("href"), ( e ) { Úspech: function (e) { + $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (. "#" + $ Current_link attr ("rel")) html (e); } }); ; return false; }); });
Dovoľte mi vysvetliť, scenár trochu. Document.ready udalosť je udalosť, ktorá sa spúšťa pri načítaní stránky. A potom sme priradiť nejaké kódy na udalosť click vzťahov, ktorí majú trieda "ajax_link". Pritom $ current_link = $ (this); umožňuje mať aktuálny odkaz na objekt musí byť k dispozícii v rámci funkcie spätného volania. A my máme
$ ("#" + $ Current_link.attr ("rel")). Html (e)
čo znamená $ ("div_id"), html (server_response) a vytvorili sme url param z funkcie $ ajax dynamicky s URL: a $ current_link.attr ("href"). Takže teraz všetky tieto prostriedky "Všetky tie odkazy, ktoré majú" triedy "- ajax_link Pridať kliknite spracovanie udalosti - a potom spustiť a AJAX požiadavku brať odkazy href poperty a nahrať odpoveď do div, ktorého id zodpovedá" rel "atribút prepojenie ". A return false zabráni odkaz prácu ako normálny odkaz 
Chceš vidieť akcii? Tu to ide.
A môžete si stiahnuť zdrojový kód rovnako.
V ďalšej časti tohto malého tutoriále budeme používať rovnakú vec, ale s trochou pohodlie.
Použitie jednoduchšie metódu
Všetko ostáva takmer rovnaké. Budeme len zmeniť spôsob ajax tu. Takže namiesto písania celej dolárov. Ajax blok môžeme dosiahnuť rovnakú vec s nasledujúcimi.
. ready ( function ( ) { $ (Document). Ready (function () { ) . click ( function ( ) { $ ("A.ajax_link"). Položku (function () { + $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (. "#" + $ (This) attr ("rel")) zaťaženie ($ (this) attr ("href").); ; return false; }); });
Je to oveľa menej komplikovaná, nie? Zaťaženie metóda načíta ajax obsahu v prvku to pripojený. Ak $ ("# somediv_id"). Zaťaženie ("mypage.php"), bude sa snažiť načítať mypage.php je obsah v ňom. Celkom jednoduché, že? Ale odporúčam si zvyknúť na hlavnú metódou (pozri prvú časť).
V zip súboru je tu ďalší súbor s názvom ajax2.php ktorá ukazuje tento Methos, ktorý má rovnaký výsledok.
Takže, AJAX, nie je tak ťažké, ako to vyzerá, že jo? Ak sa stanete veľmi plynulo s operáciami AJAX, budete vytvárať mágiu.
Vďaka za čítanie a toxínových zbraní.
Nedávne komentáre