Í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