Pra, AJAX AJAX dhe AJAX, kjo është ajo që ne bëjmë gjerësisht këto ditë. Kjo kursen kohë, shton dinamikën dhe ju jep një të ndjehen të përdorur një lloj aplikimi software të ndjehen. Nuk jeni shumë mënyra për të përdorur AJAX me shumë biblioteka. Por si ju mund të shihni këtë faqe është për jQuery, ne do të shikojmë në bazë ose ndoshta disa usages avancuar AJAX.
Çfarë bëni ju kemi nevojë?
jQuery bibliotekës (natyrisht)
Një të vogël script php
Le filloi duke folur. Në jQuery, ka në thelb janë 6 lloje të metodës për të bërë operacionet e AJAX. Këto janë
- $. Ajax (opsione)
- $. Merrni (url dhëna, callback)
- $. GetJSON (url, të dhëna, callback)
- $. GetScript (url callback)
- load (url, të dhëna, callback)
- $. Pas (url, të dhëna, callback,
Përveç nga numri 1, të gjitha metodat e tjera përdorin $. Ajax brendshmi. Kështu që do të thotë $. Ajax () është funksioni ynë nënë për operacionet jQuery AJAX. Le të shohim se si $. Ajax () duket si
msg ) ; } } ) ; "Reagimi + MSG);}}); |
Kjo është goxha ajo. Parametri Lloji merr "GET" ose "post" që do të thotë që ju mund të dërgoni requestion AJAX si GET ose POST (unë do të preferoj POST gjithmonë). Pjesa tjetër e parametrave janë goxha vetë shpjegues nëse ju merrni një vështrim në kodin përsëri.
Tani ne jemi duke shkuar për të bërë një dorëshkrim të vogël AJAX që lexon linkun e Etiketimet hyperlink (<a>) dhe ngarkon kërkesën në disa elemente div në dokument.
Së pari ne kemi marrë një dokument HTML normale të PHP e cila do të duket si ky
<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> Testi Ajax Link </ 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> |
Tani le të shtoni disa lidhje me dokumentin. Për një lloj menu të mirë të duken ne do të përdorim një> UL LI dhe lidhje. Kjo do të duket si ky
<ul id="nav">
<a class="ajax_link" rel="div1" href="response.php?user=john"> Load në Div 1 </ a> </ li>
<a class="ajax_link" rel="div2" href="response.php?user=nash"> Load në Div 2 </ a> </ li>
<a class="ajax_link" rel="div3" href="response.php?user=stella"> Load në Div 3 </ a> </ li>
<a class="ajax_link" rel="div4" href="response.php?user=jason"> Load në Div 4 </ a> </ li>
</ Ul> |
Siç mund ta shikoni ne kemi vënë lidhje në listën e elementeve brenda një objekt lista e parenditur. Hidhni një vështrim më të afërt në pronat tag <a> së. Ne kemi, Klasa href dhe rel atribut i cili duket asgjë tjetër se sa një link normal. Nëse ju shikoni, ne kemi dhënë atributin rel për disa emra div domethënë div1, div2 .. kështu me radhë. Kjo do të thotë që ne duam përgjigjen e href për të ngarkohet në ato divs. Si për të bërë këtë? Le të shtoni ato divs parë
<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> |
Dhe pjesa e vërtetë tani - ne kemi dhënë hallkat një klasë "ajax_link". Ne vetëm do të shtojnë veprimet dinamike Ajax vetëm lidhjeve me një emër të klasës quajtur "ajax_link". Ferr, ne nuk të gjitha lidhjet e një faqe të ketë veprime të Ajax, bëjmë ne?
Pra, mbi ngarkesa dokument ne do të bëjmë këtë.
. ready ( function ( ) { $ (Dokument). Gatshme (function () {
) . click ( function ( ) { $ ("A.ajax_link"). Click (function () {
this ) ; Current_link $ = $ (këtë);
$. Ajax ({
, Lloji: "post",
( "href" ) , url:. $ current_link attr ("href"),
( e ) { sukses: funksion (E) {
+ $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (. "#" + $ Current_link attr ("rel")) html (E);
}
});
; kthimit të rreme;
});
}); |
Më lejoni të shpjegoj Script një grimë. Ngjarja document.ready është një ngjarje e cila është shkaktuar ngarkesë në faqe. Dhe atëherë ne jemi caktimin e disa lloj e kodeve në ngjarjen klik të lidhjeve që kanë një klasë "ajax_link". Të bësh këtë current_link $ = $ (këtë); lejon që të ketë objekti i tanishëm lidhja të jetë në dispozicion brenda funksionit callback. Dhe ne kemi
$ ("#" $ + Current_link.attr ("rel")). Html (e)
që do të thotë $ ("div_id"), html (server_response) dhe ne kemi vendosur param URL e funksionit $ ajax dinamike me URL:. $. current_link.attr ("href"). Deri tani të gjitha ato mjete "Të gjithë ata që kanë një lidhje të klasit" ajax_link "- Shto një mbajtës ngjarje klikoni - pastaj të ekzekutojë dhe kërkesë AJAX marrë lidhjet href poperty dhe ngarkesës përgjigje në një div id cilit përputhet me" rel atribut "të lidhin ". Dhe kthimi i rremë pengon punën Lidhje si link normal 
Duan të shohin atë si një veprim? Këtu ajo shkon.
Dhe ju mund të shkarkoni burimin si.
Në seksionin e ardhshëm të këtij tutorial pak ne do të jetë duke përdorur të njëjtën gjë, por me pak e rehati.
Aplikimi metodë më të lehtë
Gjithçka mbetet pothuajse e njëjtë. Ne vetëm do të ndryshojë metodën e Ajax këtu. Pra, në vend e të shkruarit tërë bllok $. AJAX ne mund të arrijmë të njëjtën gjë me pas.
. ready ( function ( ) { $ (Dokument). Gatshme (function () {
) . click ( function ( ) { $ ("A.ajax_link"). Click (function () {
+ $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (. "#" + $ (Këtë) attr ("rel")) load ($ (këtë) attr ("href").);
; kthimit të rreme;
});
}); |
Kjo është shumë më pak e komplikuar tani, të drejtë? Metoda e ngarkesës ngarkon përmbajtjes Ajax brenda element është e bashkangjitur. Nëse $ ("# somediv_id"). Load ("mypage.php"), ai do të përpiqet të ngarkesës mypage.php 's përmbajtje në të. Pretty thjeshtë, Huh? Por, unë sugjeroj që ju të mësohen me metodën kryesore (treguar në pjesën e parë).
Në dosjen zip ka një tjetër file i quajtur ajax2.php cila demonstron këtë methos e cila ka të njëjtin rezultat.
Pra, AJAX nuk është aq e vështirë si ajo Dashuri, e drejtë? Kur ju bëhen shumë të rrjedhshëm me operacionet e AJAX, ju do të krijoni magics.
Faleminderit për leximin btw.
Komentet e fundit