Niin AJAX AJAX ja AJAX, että me teemme laajasti näinä päivinä. Se säästää aikaa, lisää dynamiikkaa ja antaa sinulle tuntuman käyttää sovelluksen sellainen tuntuu. Siellä olet monia tapoja käyttää AJAX monia kirjastoja. Mutta kuten näette tämä sivusto on jQuery, me tarkastelemme perus-tai ehkä joitakin lisämuutoksia AJAX käyttötarkoituksissa.
Mitä tarvitsemme?
jQuery-kirjaston (tietenkin)
Pieni php script
Katsotaanpa alkoi puhua. Vuonna jQuery, on periaatteessa 6 erilaista menetelmää tehdä AJAX toimintaan. Nämä ovat
- $. Ajax (optiot)
- $. Get (url, data, soittopyyntö)
- $. GetJSON (url, data, soittopyyntö)
- $. GetScript (url, soittopyyntö)
- kuormitus (url, data, soittopyyntö)
- $. Post (url, data, soittopyyntö,
Sen lisäksi, numero 1, kaikki muut menetelmät käyttävät $. Ajax sisäisesti. Joten se tarkoittaa $. Ajax () on äitimme toimintoa jQuery AJAX toimintaan. Katsotaanpa miten $. Ajax () näyttää
$. Ajax ({ , type: "POST" , url: "some.php" , data: "name = Peter & location = NY" ( msg ) { menestys: toiminto (msg) { "Server Response " + msg ) ; alert ("Palvelimen vastaus" + msg); } });
Se on aika se. Tyyppi parametri tekee "GET" tai "POST" eli voit lähettää AJAX requestion kuten POST tai GET (Toivoisin POST aina). Loput parametrit ovat melko itsestään selviä, jos katsomaan koodi uudelleen.
Nyt aiomme tehdä pienen AJAX skripti, joka lukee linkkiä hyperlinkin tunnisteet (<a>) ja lataa pyynnön joitakin div elementtejä asiakirjaan.
Ensin otamme normaalin html ja php asiakirjan, joka näyttää tältä
<! DOCTYPE html JULKINEN "- / / 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 testi </ 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>
Nyt lisätä joitakin linkkejä asiakirjaan. Paremman menu sellaista näyttää käytämme UL> LI ja Link. Se näyttää tältä
<ul id="nav"> <li> <a class="ajax_link" rel="div1" href="response.php?user=john"> Kuorman Div 1 </ a> </ li> <li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> Kuorman Div 2 </ a> </ li> <li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> Kuorman Div 3 </ a> </ li> <li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> Kuorman Div 4 </ a> </ li> </ Ul>
Kuten näette olemme laittaa linkkejä listassa Sisällä Järjestämätön lista esine. Ota tarkemmin <a> ominaisuuksia. Olemme href, luokka ja suht ominaisuus, joka näyttää mitään erilaista kuin normaalia linkkiä. Jos näet, olemme antaneet rel-määritteen joitakin div nimiä eli div1, div2 .. niin edelleen. Tämä tarkoittaa Haluamme vastaus href voidaan ladata noihin divs. Miten tehdä? Katsotaan lisätä näiden divs ensimmäinen
<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 reaaliosa nyt - olemme antaneet linkit luokkaa "ajax_link". Me vain dynaamisesti ajax toimia vain linkkejä, joiden luokan nimi nimeltä "ajax_link". Helvetti, emme kaikkia yhteyksiä sivun on ajax toimiin, me?
Joten, on asiakirjassa kuorma olimme tähän.
. ready ( function ( ) { $ (Document). Valmiina (function () { ) . click ( function ( ) { $ ("A.ajax_link"). Osoita (function () { this ) ; $ Current_link = $ (tämä); $. Ajax ({ , type: "post" ( "href" ) , url: $ current_link. attr ("href"), ( e ) { menestys: funktio (e) { + $current_link. attr ( "rel" ) ) . html ( e ) ; $ ("#" + $ Current_link. Attr ("rel")). Html (e); } }); ; palauttaa false; }); });
Selitän käsikirjoitus hieman. Document.ready tapahtuma on tapahtuma, joka laukeaa sivulla kuormalla. Ja sitten me määrittämällä jonkinlaisia koodeja napsautuksen yhteyksien jotka ovat luokkaa "ajax_link". Muutoin tämä $ current_link = $ (tämä) voidaan saada nykyistä linkin kohde on käytettävissä takaisinkutsufunktio. Ja meillä on
$ ("#" + $ Current_link.attr ("rel")). Html (e)
joka tarkoittaa $ ("div_id"). html (server_response) ja olemme perustaneet url param of $. ajax-toiminto dynaamisesti url: $ current_link.attr ("href"). Joten nyt kaikki keinot "Kaikki ne linkit, jotka ovat luokkaa" ajax_link "- Lisää napsautuksen handler - senjälkeen ja AJAX pyyntöä ottaen linkkien href poperty ja laita vastaus tulee div jonka id vastaa" rel "-ominaisuutta linkki ". Ja paluu väärä estää yhteyden työtä kuin normaali yhteys 
Haluatko nähdä se toimia? Tässä se menee.
Ja voit ladata lähde samoin.
Seuraavassa osassa tämän pienen opetusohjelmassa Käytämme samaa, mutta hieman mukavuutta.
Hakeminen helpompi tapa
Kaikki pysyy lähes samana. Me vain muuttaa ajax menetelmää. Joten sen sijaan kirjoittaa koko $. Ajax lohko voimme saavuttaa sama juttu seuraava.
. ready ( function ( ) { $ (Document). Valmiina (function () { ) . click ( function ( ) { $ ("A.ajax_link"). Osoita (function () { + $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; $ ("#" + $ (Tämä). Attr ("rel")). Kuormitus ($ (tämä). Attr ("href")); ; palauttaa false; }); });
Se on paljon vähemmän monimutkaisia nyt, eikö? Kuorman menetelmä lataa ajax sisältöjä elementin se kiinni. Jos $ ("# somediv_id"). Kuormitus ("mypage.php"), sillä yritän ladata mypage.php kyllyydestä siinä. Aika yksinkertaista, eikö? Mutta ehdotan tottuu tärkein keino (esitetty ensimmäinen osa).
Kun zip-tiedosto on toinen tiedosto nimeltä ajax2.php joka osoittaa tämän Methos jolla on sama tulos.
Joten, AJAX ei ole niin vaikeaa kuin miltä se kuulostaa, eikö? Kun olet tullut hyvin sujuvaa AJAX toimintaa, luot magics.
Kiitos käsittelyssä btw.
Viimeisimmät kommentit