Allura Ajax Ajax u Ajax, dan huwa dak li nagħmlu estensiv dawn il-jiem. Li jiffranka ħin, iżid dinamika u jagħtik jħossu ta 'użu ta' applikazzjoni tas-software tip ta 'jħossu. Hemm qed ħafna modi biex jużaw Ajax ma libreriji ħafna. Imma kif tista 'tara dan is-sit hija għal jQuery, aħna ser tħares lejn il-bażiċi jew forsi xi użi Ajax avvanzati.
What do you għandna bżonn?
librerija jQuery (naturalment)
A b'kitba PHP ċkejkna
Ejja beda jitkellem. Fil jQuery, hemm bażikament 6 tipi ta 'metodu li jagħmel operazzjonijiet Ajax. Dawn huma
- $. Ajax (għażliet)
- $. Tikseb (url, data, callback)
- $. GetJSON (url, data, callback)
- $. GetScript (url, callback)
- tagħbija (url, data, callback)
- . Post $ (url, data, callback,
Aparti minn numru 1, il-metodi kollha l-oħra jużaw $. Ajax internament. Allura dan ifisser $. Ajax () hija l-funzjoni omm tagħna għall-operazzjonijiet Ajax jQuery. Ejja nħarsu lejn kif $. Ajax () Dehra
$. Ajax ({ , tip: "POST", , url: "some.php", , data: "isem = Peter & post = NY", ( msg ) { suċċess: funzjoni (MSG) { + msg ) ; twissija ("Rispons Server" + MSG); } }); |
Li pretty dan. Il-parametru tip tieħu "IKOLLOK" jew "POST" li jfisser li inti tista 'tibgħat requestion AJAX bħala POST jew IKOLLOK (I d jippreferu POST dejjem). Il-bqija tal-parametri huma pjuttost awto spjegazzjoni jekk inti tagħti ħarsa lejn il-kodiċi ġdid.
Issa aħna qed tmur biex tagħmel b'kitba AJAX żgħira li jaqra l-link ta 'tikketti hyperlink (<a>) u tagħbijiet-talba fuq xi elementi div fid-dokument.
Nieħdu l-ewwel html normali ta 'dokument PHP li se teżamina bħal dan
<DOCTYPE html PUBLIC! "- / / W3C / / DTD XHTML 1.0 stretti / / 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> test link Ajax </ titolu> <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> |
Issa ejja żid xi links għad-dokument. Għal menu tip aħjar ta 'ħarsa aħna ser tuża UL> LI u Link. Li se teżamina bħal dan
<ul id="nav"> <li> <a class="ajax_link" rel="div1" href="response.php?user=john"> tat-Tagħbija fis Div 1 </ a> </ li> <li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> tat-Tagħbija fis Div 2 </ a> </ li> <li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> tat-Tagħbija fis Div 3 </ a> </ li> <li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> tat-Tagħbija fis Div 4 </ a> </ li> </ Ul> |
Kif tistgħu taraw aħna poġġew rabtiet fl-elementi lista ġewwa lista unordered oġġett. Agħti ħarsa aktar mill-qrib lejn proprjetajiet tal-lametta tal <a>. Għandna href, klassi u rel attribut li jistenna xejn differenti minn rabta normali. Jekk tara, aħna taw l-attribut rel għal xi ismijiet div jiġifieri div1, div2 .. bqija. Dan ifisser li aħna rridu ir-rispons ta 'l-href' jkollhom jitgħabbew fl dawk divs. Kif tagħmel dan? Ejja żid dawk divs ewwel
<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> |
U l-parti reali issa - aħna taw il-links klassi "ajax_link". Aħna ser biss dinamikament iżżid azzjonijiet ajax biss links li klassi ta 'isem imsejħa "ajax_link". Infern, aħna ma l-ħoloq kollha ta 'paġna li jkollhom azzjonijiet ajax, do we?
Allura, fuq it-tagħbija dokument aħna'd jagħmlu dan.
. ready ( function ( ) { $ (Dokument). Lest (funzjoni () { ) . click ( function ( ) { $ ("A.ajax_link"). Ikklikkja (funzjoni () { this ) ; $ Current_link = $ (dan); $. Ajax ({ , tip: "post", ( "href" ) , url:. $ current_link attr ("href"), ( e ) { suċċess: funzjoni (e) { + $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (. "#" + $ Current_link attr ("rel")) html (e); } }); ; ritorn foloz; }); }); |
Let me jispjegaw l-iskrittura ftit. L-avveniment document.ready huwa avveniment li huwa triggered b'tagħbija paġna. U allura aħna qed jassenjaw xi tip ta 'kodiċi dwar l-avveniment ikklikkja tar-rabtiet li għandhom klassi "ajax_link". Nagħmlu dan $ current_link = $ (dan); tippermetti li jkollhom l-oġġett link kurrenti tkun disponibbli fi ħdan il-funzjoni callback. U aħna għandna
$ ("#" + $ Current_link.attr ("rel")). Html (e)
li jfisser $ ("div_id") html (server_response) u waqqafna l-param url tal-$ funzjoni ajax dinamikament ma url:.. $ current_link.attr ("href"). Allura issa dawk kollha mezzi "dawk kollha rabtiet li għandhom klassi" ajax_link "- Żid handler avveniment click - imbagħad jesegwixxu u talba Ajax tieħu l-links href poperty u t-tagħbija r-rispons fi div li id jaqbel mal-" rel "attribut ta 'l- link ". U r-ritorn foloz jipprevjeni l-ħidma link simili link normali 
Trid tara l-azzjoni? Hawnhekk tmur.
U inti tista ' tniżżel is-sors kif ukoll.
Fit-taqsima li jmiss ta 'dan tutorja ftit aħna ser tkun qed tuża l-istess ħaġa, iżda bi ftit ta' kumdità.
Applikat il-metodu eħfef
Kollox baqgħet kważi l-istess. Aħna ser biss jibdlu l-metodu ajax hawn. Allura minflok bil-miktub l-blokk kollu $. Ajax nistgħu tikseb l-istess ħaġa ma 'dan li ġej.
. ready ( function ( ) { $ (Dokument). Lest (funzjoni () { ) . click ( function ( ) { $ ("A.ajax_link"). Ikklikkja (funzjoni () { + $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (. "#" + $ (Dan) attr ("rel")) tagħbija ($ (dan) attr ("href").); ; ritorn foloz; }); }); |
Huwa ħafna inqas ikkumplikati issa, id-dritt? Il-metodu tat-tagħbija tagħbijiet-kontenut ajax fl-element huwa mehmuż ma '. Jekk $ ("# somediv_id"). Tagħbija ("mypage.php"), li ser jippruvaw "i kontenut mypage.php tagħbija fiha. Pretty sempliċi, huh? Imma i jissuġġerixxu li inti jidra l-metodu ewlieni (muri fl-ewwel parti).
Fil-fajl zip hemm ieħor fajl imsejjaħ ajax2.php li juri dan methos li għandha l-istess riżultat.
Għalhekk, Ajax huwa mhux bħala hard kif ħsejjes, id-dritt? Meta inti ssir ħafna fluwenti bl-operazzjonijiet Ajax, inti ser toħloq magics.
Grazzi għall-qari btw.
Kummenti riċenti