Nii AJAX AJAX ja AJAX, mis on see, mida me teeme ulatuslikult nendel päevadel. See säästab aega, lisab dünaamikat ja annab teile tunne kasutades tarkvara rakendus selline tunne. Seal oled palju viise, kuidas kasutada AJAX paljud raamatukogud. Aga nagu näete, see sait on jQuery, me vaatame põhilised või ehk mõned arenenud AJAX täitmise.
Mida sa vajame?
jQuery library (loomulikult)
Väike php skript
Olgem hakkas rääkima. In jQuery on põhiliselt 6 tüüpi meetod teha AJAX operatsioone. Need on
- $. Ajax (võimalused)
- $. Saada (url, andmed, callback)
- $. GetJSON (url, andmed, callback)
- $. GetScript (url, callback)
- koormus (url, andmed, callback)
- $. Postitus (url, andmed, tagasihelistamist
Peale number 1, kõiki teisi meetodeid kasutada $. Ajax sisemiselt. Nii et see tähendab $. Ajax () on meie ema funktsioon jQuery AJAX operatsioone. Vaatame, kuidas $. Ajax () näeb
$. Ajax ({ , tüüp: "POST" , url: "some.php" , andmed: "name = Peter & location = NY" ( msg ) { edu: funktsioon (msg) { + msg ) ; alert ("Server Response" + msg); } }); |
See on päris see. Parameeter võtab "Saada" või "POST", mis tähendab, et saate saata AJAX requestion kui POST või GET (ma eelistan POST alati). Ülejäänud näitajad on üsna mõistetav, kui te võtate pilk kood uuesti.
Nüüd me ei kavatse teha väike AJAX skript, mis loeb link hüperlink silte (<a>) ja laadib taotluse mõned div elemente dokumendis.
Kõigepealt võtame tavalise html php dokument, mis näeb välja selline
<! 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 link 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> |
Nüüd lisada mõned lingid dokument. Sest parem menüü sellist vaadata me kasutame UL> LI ja Link. See näeb välja selline
<ul id="nav"> <li> <a class="ajax_link" rel="div1" href="response.php?user=john"> Load in Div 1 </ a> </ li> <li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> Load in Div 2 </ a> </ li> <li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> Load in Div 3 </ a> </ li> <li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> Load div 4 </ a> </ li> </ Ul> |
Nagu näete, oleme pannud linkide nimekiri elemente sees Tavalise nimekirja objekt. Võtke lähemalt <a> sildi omadusi. Meil on href, klassi ja rel atribuut, mis näeb välja midagi erinevat kui tavaline link. Kui näed, oleme andnud rel atribuut mõned div nimed nimelt div1, div2 .. nii edasi. See tähendab, et me tahame vastust href laaditav need divs. Kuidas seda teha? Lisame need divs esimene
<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> |
Ja reaalosa nüüd - oleme andnud linke klass "ajax_link". Me ainult dünaamiliselt lisada ajax meetmeid ainult lingid, millel klassi nimeks "ajax_link". Kurat, me ei ole kõik lingid leht on ajax meetmeid, me peame tegema?
Niisiis, dokument koormust me tahaks seda teha.
. ready ( function ( ) { $ (Dokument). Valmis (function () { ) . click ( function ( ) { $ ("A.ajax_link"). Klõpsake (function () { this ) ; $ Current_link = $ (see); $. Ajax ({ , tüüp: "post" ( "href" ) , URL: $ current_link. attr ("href"), ( e ) { edu: funktsioon (e) { + $current_link. attr ( "rel" ) ) . html ( e ) ; $ ("#" + $ Current_link. Attr ("rel")). Html (e); } }); ; tagasi false; }); }); |
Seletan script natuke. Document.ready sündmus on sündmus, mis käivitub lehe laadimist. Ja siis me määrata mingi koodid nuppu korral sidemeid, kes on klassi "ajax_link". Seejuures $ current_link = $ (see); võimaldab saada praeguse link objekt olema kättesaadavad tagasikutse funktsiooni. Ja meil on
$ ("#" + $ Current_link.attr ("rel")). Html (e)
mis tähendab $ ("div_id"). html (server_response) ja oleme seadnud url param of $. ajax funktsioon dünaamilist URL: $ current_link.attr ("href"). Nüüd kõik need vahendid "Kõik need lingid, kes on klassi" ajax_link "- Lisa kliki sündmus - seejärel käivitada ja AJAX taotlust, võttes linke href poperty ja koormus vastus arvesse div kelle ID vastab" rel "atribuut link ". Ja tagasi false takistab link tööd nagu tavaline link 
Tahad näha see tegevus? Siin see läheb.
Ja saate alla laadida allikas ka.
Järgmises osas on see väike tutorial me kasutame sama asja, kuid natuke mugavust.
Rakendades lihtsam meetod
Kõik jääb peaaegu sama. Me lihtsalt muuta ajax meetod siin. Nii et selle asemel, et kirjutada kogu $. Ajax block suudame saavutada sama asja pärast.
. ready ( function ( ) { $ (Dokument). Valmis (function () { ) . click ( function ( ) { $ ("A.ajax_link"). Klõpsake (function () { + $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; $ ("#" + $ (See). Attr ("rel")). Koormus ($ (see). Attr ("href")); ; tagasi false; }); }); |
See on palju vähem keeruline, eks? Koormus meetod laadib ajax sisu elementides see külge. Kui $ ("# somediv_id"). Koormus ("mypage.php"), siis püüan laadida mypage.php 's sisu ta. Päris lihtne, ah? Aga ma soovitan teil harjuda peamine meetod (näidatud esimene osa).
In zip faili seal on teine fail nimega ajax2.php mis näitab seda methos mis on sama tulemus.
Niisiis, AJAX ei ole nii raske kui see kõlab, eks? Kui te jääte väga ladus AJAX operatsioonide loote magics.
Tänud lugemise btw.
Viimased Kommentaarid