Joten Ajax ja AJAX, että mitä me teemme laajasti näinä päivinä. Se säästää aikaa, lisää dynamiikkaa ja antaa sinulle tuntumaa käyttäen sovellus 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 kehittyneitä AJAX käyttötarkoituksissa.
Mitä me tarvitsemme?
jQuery kirjasto (tietenkin)
Pieni PHP-skripti
Katsotaanpa alkoi puhua. JQuery on periaatteessa 6 tyyppisiä tapa tehdä AJAX toimintaa. Nämä ovat
- $. Ajax (optio)
- $. Saada (url, data, soittopyyntö)
- $. GetJSON (url, data, soittopyyntö)
- $. GetScript (url, soittopyyntö)
- kuormitus (url, data, soittopyyntö)
- $. Post (url, data, soittopyyntö,
Lisäksi numero 1, kaikki muut menetelmät käyttävät $. Ajax sisäisesti. Joten se tarkoittaa $. Ajax () on äitimme toiminto jQuery AJAX toimintaa. Katsotaan miten $. Ajax () näyttää
$. Ajax ({
, tyyppi: "POST"
, url: "some.php"
, tiedot: "name = Peter & location = NY"
( msg ) { menestys: toiminto (MSG) {
+ msg ) ; alert ("Palvelimen vastaus" + msg);
}
}); |
Se on aika se. Kirjoita parametrien vie "GET" tai "POST", joka tarkoittaa, että voit lähettää AJAX requestion kuin POST tai GET (taidan POST aina). Loput parametrit ovat melko itsestään selvä, jos katsomaan koodi uudelleen.
Nyt aiomme tehdä pienen AJAX skripti, joka lukee linkin hyperlinkin tunnisteet (<a>) ja lataa pyynnöstä joitakin div elementtejä asiakirjaan.
Ensin valtaamme normaali html php asiakirja, joka näyttää tältä
<! 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 linkki 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ä asiakirjan. Saat 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"> Kuorma Div 1 </ a> </ li>
<li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> Kuorma Div 2 </ a> </ li>
<li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> Kuorma ryhmä 3 </ a> </ li>
<li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> Kuorma Div 4 </ a> </ li>
</ Ul> |
Kuten näette olemme laittaa linkkejä luettelossa Sisällä Järjestämätön lista esine. Ottaa tarkemmin <a> ominaisuudet. Meillä on href, luokka ja suht ominaisuus, joka näyttää mitään erilaista kuin normaali linkki. Jos näet, olemme antaneet suht määritteen joitakin div nimiä eli DIV1, DIV2 .. niin edelleen. Tämä tarkoittaa sitä, haluamme vastauksen href voidaan lastata noihin divs. Miten se tehdään? Katsotaanpa lisätä ne divs ensin
<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 todellinen osa nyt - olemme antaneet linkkejä luokan "ajax_link". Me vain dynaamisesti lisätä ajax toimia vain linkkejä, joiden luokan nimi nimeltä "ajax_link". Helvetti, emme kaikki linkit sivun on ajax toimia, me?
Joten, dokumenttien kuorma tekisimme tätä.
. ready ( function ( ) { $ (Document). Valmis (function () {
) . click ( function ( ) { $ ("A.ajax_link"). Napsauta (function () {
this ) ; $ Current_link = $ (tämä);
$. Ajax ({
, tyyppi: "post"
( "href" ) , url: $ current_link. määr ("href"),
( e ) { menestys: toiminto (e) {
+ $current_link. attr ( "rel" ) ) . html ( e ) ; $ ("#" + $ Current_link. Määr ("rel")). Html (e);
}
});
; return false;
});
}); |
Selitän käsikirjoituksen hieman. Document.ready tapahtuma on tapahtuma, joka käynnistyy, kun sivun lataus. Ja sitten me osoitetaan jonkinlainen koodit klikkaa tapauksessa linkkejä, jotka ovat luokassa "ajax_link". Näin $ current_link = $ (tämä) avulla on nykyisen 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 url param of $. ajax toiminto dynaamisesti url: $ current_link.attr ("href"). Joten nyt kaikki nämä keinot "Kaikki nämä linkit, jotka ovat luokassa" ajax_link "- Lisää napsautuksen handler - suorita ja AJAX pyyntöä ottaen linkkejä href poperty ja lataa vastaus tulee div jonka id vastaa" rel "ominaisuus linkki ". Ja paluu väärä estää linkin työtä kuin normaali linkki 
Haluatko nähdä se toimia? Tässä se menee.
Ja voit ladata lähdekoodin samoin.
Seuraavassa jaksossa tämän pienen opetusohjelma Käytämme sama asia, mutta hieman mukavuutta.
Hakeminen helpompi tapa
Kaikki pysyy lähes samana. Me vain muuttaa ajax menetelmää. Joten sen sijaan, että kirjoittaisit koko $. Ajax lohko voimme saavuttaa sama juttu seuraavat.
. ready ( function ( ) { $ (Document). Valmis (function () {
) . click ( function ( ) { $ ("A.ajax_link"). Napsauta (function () {
+ $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; $ ("#" + $ (Tämä). Määr ("rel")). Kuormitus ($ (tämä). Määr ("href"));
; return false;
});
}); |
Se on paljon vähemmän monimutkaisia nyt, eikö? Kuormitus menetelmä lataa ajax sisältöjä elementti se kiinni. Jos $ ("# somediv_id"). Kuormitus ("mypage.php"), se tulee yrittää ladata mypage.php n sisältöä sen. Melko yksinkertainen, eikö? Mutta ehdotan tottuu pääasiallinen menetelmä (esitetty ensimmäinen osa).
Zip-tiedosto on toinen tiedosto nimeltä ajax2.php joka osoittaa tämän Methos joka on sama tulos.
Joten, AJAX ei ole niin vaikeaa kuin miltä se kuulostaa, eikö? Kun tulet hyvin sujuvaa AJAX toiminnot, voit luoda magics.
Kiitos käsittelyssä btw.
Viimeisimmät kommentit