Így AJAX AJAX és AJAX, ez az, amit teszünk, alaposan ezekben a napokban. Ez időt takarít meg, növeli dinamika és adja meg a hangulatát segítségével szoftver milyen érzés. Már sok módon lehet használni AJAX sok könyvtárakkal. De mint látható, ezen az oldalon a jQuery, akkor nézd meg az alap-vagy esetleg néhány fejlett AJAX használat.
Mit kell nekünk?
jQuery könyvtár (természetesen)
Egy kis php script
Nézzük beszélni kezdett. A jQuery, van alapvetően 6 fajta módszer erre AJAX műveleteket. Ezek
- $. Ajax (opciók)
- $. Kap (url, adatok, callback)
- $. GetJSON (url, adatok, callback)
- $. GetScript (url, callback)
- terhelés (url, adatok, callback)
- $. Post (url, adatok, visszahívás,
Eltekintve a 1-es szám, a többi módszer a $. Ajax belsőleg. Tehát ez azt jelenti $. Ajax () a mi anyánk funkció jQuery AJAX műveleteket. Nézzük meg, hogy $. Ajax () úgy néz ki, mint a
$. Ajax ({ , típus: "POST" , url: "some.php" , adatok: "name = Peter & location = NY" ( msg ) { siker: function (msg) { + msg ) ; alert ("Server Response" + msg); } }); |
Ez elég is. A típus paraméter veszi "GET" vagy "POST", ami azt jelenti, hogy küldje AJAX requestion mint POST vagy GET (Én inkább POST mindig). A többi paraméter elég magától értetődő, ha egy pillantást a kódot.
Most megyünk, hogy egy kis AJAX script, hogy beolvassa a kapcsolatot a hivatkozás címkék (<a>), valamint betölti a kérelmet bizonyos div elem a dokumentumban.
Először egy normális html a php dokumentum fog kinézni
<! 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 kapcsolat teszt </ 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> |
Most kell egy kis linkeket a dokumentumot. A jobb menüt fajta megjelenés fogjuk használni a UL> LI és Link. Ez így fog kinézni
<ul id="nav"> <li> <a class="ajax_link" rel="div1" href="response.php?user=john"> Terhelés Div 1 </ a> </ li> <li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> Terhelés Div 2 </ a> </ li> <li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> Terhelés Div 3 </ a> </ li> <li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> Terhelés Div 4 </ a> </ li> </ Ul> |
Mint látható, már fel linkeket listában elemek belsejében egy rendezetlen lista objektum. Vessen egy közelebbi pillantást a <a> tag tulajdonságait. Van href, osztály és a rel attribútum, amely úgy néz ki, nem más, mint egy normális kapcsolat. Ha látod, adtunk a rel attribútum bizonyos div nevet nevezetesen div1, DIV2 .. így tovább. Ez azt jelenti, hogy szeretnénk a választ a href kell betölteni a divs. Hogyan kell csinálni? Adjuk hozzá az első divs
<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> |
És az igazi része már - már adott a linkeket a osztály "ajax_link". Majd csak a dinamikus hozzáadását ajax műveleteket csak hivatkozásokat, amelyek egy osztály neve, amit "ajax_link". A pokolba is, nem minden a linkeket az oldal, hogy ajax akciók, ugye?
Így a dokumentum terhelés tennénk ezt.
. ready ( function ( ) { $ (Document). Ready (function () { ) . click ( function ( ) { $ ("A.ajax_link"). Kattintson a (function () { this ) ; $ Current_link = $ (this); $. Ajax ({ , típus: "post" ( "href" ) , url: $ current_link. attr ("href"), ( e ) { siker: function (e) { + $current_link. attr ( "rel" ) ) . html ( e ) ; $ ("#" + $ Current_link. Attr ("rel").) Html (e); } }); ; return false; }); }); |
Hadd magyarázzam meg a forgatókönyvet egy kicsit. A document.ready esemény egy esemény, amely a kiváltó oldalon terhelést. És akkor mi hozzárendelése valamiféle kódok a Click esemény a linkek, akik egy osztály "ajax_link". Ezáltal $ current_link = $ (this); lehetővé teszi, hogy a jelenlegi kapcsolat tárgy áll a callback függvény. És van
$ ("#" + $ Current_link.attr ("rel").) Html (e)
ami azt jelenti, $ ("div_id"). html (server_response), és beállította az url param a $. Ajax funkció dinamikusan url: $ current_link.attr ("href"). Tehát most minden eszközzel "Mindazok, akik a kapcsolatok osztály" ajax_link "- Add a click eseménykezelő - majd végrehajtani, és AJAX kérés figyelembe a linkeket href poperty és töltse a válasz egy div id akinek megfelel a" rel "attribútum a link ". És a return false megakadályozza, hogy a kapcsolat a munka, mint a normális kapcsolat 
Akarod látni egy akció? Itt megy.
És tudod letölteni a forrást is.
A következő részben ennek a kis bemutató fogjuk használni az ugyanaz, de egy kis kényelmet.
Alkalmazása egyszerűbb módszer
Minden marad majdnem ugyanaz. Majd csak megváltoztatni a ajax módszer itt. Tehát ahelyett, hogy az írás az egész $. Ajax blokk tudjuk elérni ugyanezt a következő.
. ready ( function ( ) { $ (Document). Ready (function () { ) . click ( function ( ) { $ ("A.ajax_link"). Kattintson a (function () { + $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; $ ("#" + $ (This). Attr ("rel").) Terhelés ($ (this). Attr ("href")); ; return false; }); }); |
Ez sokkal kevésbé bonyolult, igaz? A terhelési módszer betölti az Ajax tartalom az elem ez kapcsolódik. Ha a $ ("# somediv_id"). Terhelés ("mypage.php"), akkor megpróbálom betölteni mypage.php 's tartalom is. Elég egyszerű, nem? De azt javaslom, hogy megszokja a fő módszer (lásd az első részben).
A zip fájlban van egy másik fájl neve ajax2.php , amely bemutatja a Methos, amely ugyanazt az eredményt.
Tehát, AJAX nem olyan nehéz, mint amilyennek hangzik, ugye? Ha nagyon folyékonyan és AJAX műveleteket, akkor létre mágia.
Köszönöm, hogy elolvasta btw.
Legutóbbi megjegyzések