Så AJAX AJAX och AJAX, det är vad vi gör i stor utsträckning i dessa dagar. Det sparar tid, tillägger dynamik och ger dig en känsla av att använda ett slags program av känsla. Det är många sätt att använda AJAX med många bibliotek. Men som du kan se denna sida är för jQuery, ska vi titta på de grundläggande eller kanske några avancerade AJAX användningsområden.
Vad vill ni att vi behöver?
jQuery bibliotek (naturligtvis)
En liten php script
Vi började prata. I jQuery, det finns i princip sex typer av metod för att göra AJAX verksamhet. Dessa är
- $. Ajax (alternativ)
- $. Få (url, uppgifter, återuppringning)
- $. GetJSON (url, uppgifter, återuppringning)
- $. GetScript (url, återuppringning)
- load (url, uppgifter, återuppringning)
- $. Inlägget (url, uppgifter, återuppringning,
Bortsett från nummer 1, alla andra metoder använder $. Ajax internt. Så det betyder $. Ajax () är vår mamma funktion för jQuery AJAX verksamhet. Låt oss titta på hur $. Ajax () ser ut
msg ) ; } } ) ; Response "+ msg);}}); |
Det är ganska det. Den typ parametern tar "GET" eller "POST" vilket innebär att du kan skicka AJAX requestion som POST eller GET (jag föredrar POST alltid). Resten av parametrarna är ganska självförklarande om du tar en titt på koden igen.
Nu ska vi göra en liten AJAX skript som läser länken för hyperlänk taggar (<a>) och laddar förfrågan på vissa div element i dokumentet.
Först tar vi en vanlig html med php dokument som ser ut så här
<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 länktest </ 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> |
Nu ska vi lägga till några länkar i dokumentet. För en bättre meny typ av utseende som vi kommer att använda en UL> LI och Link. Det ser ut så här
<ul id="nav">
<li> <a class="ajax_link" rel="div1" href="response.php?user=john"> Belastning i Div 1 </ a> </ li>
<li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> Belastning i Div 2 </ a> </ li>
<li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> Load i Div 3 </ a> </ li>
<li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> Load i Div 4 </ a> </ li>
</ Ul> |
Som ni ser har vi lagt länkar i listan element inuti en oordnad lista objekt. Ta en närmare titt på <a> taggens egenskaper. Vi har href, klass och rel attribut som ser något annorlunda ut än en vanlig länk. Om du ser, har vi gett rel attribut till vissa div namn nämligen DIV1, div2 .. så vidare. Detta innebär att vi vill ha svaret på href som ska laddas in dessa divar. Hur gör man det? Låt oss lägga dessa divar först
<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> |
Och den verkliga delen nu - vi har gett länkarna en klass "ajax_link". Vi ska bara dynamiskt lägga ajax åtgärder endast länkar som har ett klassnamn som heter "ajax_link". Helvete, har vi inte alla länkar på en sida för att få ajax åtgärder, gör vi?
Så, om dokumentet belastning vi skulle göra det här.
. ready ( function ( ) { $ (Document). Färdig (function () {
) . click ( function ( ) { $ ("A.ajax_link"). Klicka (function () {
this ) ; $ Current_link = $ (this);
$. Ajax ({
, Typ: "post",
( "href" ) , URL:. $ current_link attr ("href"),
( e ) { framgång: function (e) {
+ $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (. "#" + $ Current_link attr ("rel")) html (e);
}
});
; return false;
});
}); |
Låt mig förklara manuset lite. Den document.ready händelse är en händelse som utlöses vid sidan belastning. Och sedan ska vi tilldela någon form av koder på klickhändelsen av länkarna som har en klass "ajax_link". Att göra detta $ current_link = $ (this); medger att den aktuella länken objektet finnas tillgängliga inom callback-funktionen. Och vi har
$ ("#" + $ Current_link.attr ("rel")). Html (e)
vilket betyder $ ("div_id") html (server_response) och vi har satt url param av $ ajax funktionen dynamiskt med URL:.. $ current_link.attr ("href"). Så nu alla dessa medel "Alla dessa länkar som har en klass" ajax_link "- Lägg en handler click-händelse - sedan köra och AJAX begäran tar länkarna href poperty och läsa svaret i en div vars id matchar" rel "-attributet i länka ". Och return false förhindrar länken fungerar som vanlig länk 
Vill du se det en handling? Här går.
Och du kan ladda ner källkoden också.
I nästa avsnitt av denna lilla handledning vi kommer att använda samma sak men med en lite tröst.
Tillämpa enklare metod
Allt är nästan samma. Vi ska bara byta ajax metoden här. Så istället för att skriva hela $. Ajax blocket vi kan uppnå samma sak med följande.
. ready ( function ( ) { $ (Document). Färdig (function () {
) . click ( function ( ) { $ ("A.ajax_link"). Klicka (function () {
+ $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (. "#" + $ (This) attr ("rel")) load ($ (this) attr ("href").);
; return false;
});
}); |
Det är mycket mindre komplicerat nu, eller hur? Belastningen Metoden laddar ajax innehållet i elementet den är kopplad till. Om $ ("# somediv_id"). Last ("mypage.php"), det ska försöka ladda mypage.php 's innehåll i den. Ganska enkelt, va? Men jag föreslår att du vänjer den huvudsakliga metoden (som visas i den första delen).
I zip-filen finns det en annan fil som heter ajax2.php som visar detta Methos som har samma resultat.
Så, är AJAX inte så svårt som det låter, eller hur? När du blir mycket flytande med AJAX verksamhet skapar du magi.
Tack för att läsa btw.
Senaste kommentarer