So AJAX AJAX und AJAX, das ist, was wir tun in diesen Tagen ausgiebig. Es spart Zeit, fügt Dynamik und gibt Ihnen ein Gefühl der Verwendung einer Software-Anwendung Art Gefühl. Es sind viele Möglichkeiten, um mit vielen AJAX-Bibliotheken verwenden. Aber wie Sie sehen können, ist diese Seite für jQuery, sehen wir uns an den Grund-oder vielleicht einige erweiterte AJAX Nutzungen aussehen.
Was meinst du wir brauchen?
jQuery-Bibliothek (natürlich)
Ein kleines PHP-Skript
Lassen Sie begann zu sprechen. In jQuery gibt es grundsätzlich 6 Arten von Verfahren, um AJAX-Operationen zu tun. Dies sind
- $. Ajax (Optionen)
- $. Get (url, Daten, Rückruf)
- $. GetJSON (url, Daten, Rückruf)
- $. GetScript (url, callback)
- load (url, Daten, Rückruf)
- $. Post (url, Daten, Rückruf,
Abgesehen von der Nummer 1, verwenden alle anderen Methoden $. Ajax intern. Das heißt also $. Ajax () ist unsere Mutter Funktion für jQuery AJAX Operationen. Lassen Sie uns an, wie $ zu suchen. Ajax () sieht aus wie
$. Ajax ({
, Typ: "POST",
, url: "some.php"
, Daten: "name = Peter & location = NY",
( msg ) { Erfolg: function (msg) {
+ msg ) ; alert ("Server Response" + msg);
}
}); |
Das ist ziemlich es. Der type-Parameter nimmt "GET" oder "POST", dh Sie können AJAX requestion als POST oder GET (ich würde immer lieber POST). Die übrigen Parameter sind ziemlich selbsterklärend, wenn Sie einen Blick auf den Code wieder zu nehmen.
Jetzt werden wir eine kleine AJAX-Skript, das die Verbindung von Hyperlink-Tags (<a>) liest und lädt die Anfrage auf einigen DIV-Elemente in dem Dokument zu machen.
Zuerst nehmen wir eine normale html von php Dokument, das wie folgt aussehen wird
<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" />
Jetzt registrieren src="jquery-1.2.6.min.js"> </ script>
</ Head>
<body>
</ Body> </ html> |
Jetzt fügen wir einige Links zu dem Dokument. Für ein besseres Menü Art des Blickes verwenden wir eine UL> LI und Link. Das wird wie folgt aussehen
<ul id="nav">
<li> <a class="ajax_link" rel="div1" href="response.php?user=john"> laden in Div 1 </ a> </ li>
<li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> laden in Div 2 </ a> </ li>
<li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> laden in Div 3 </ a> </ li>
<li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> laden in Div 4 </ a> </ li>
</ Ul> |
Wie Sie sehen können haben wir Links in der Liste Elemente innerhalb einer ungeordneten Liste Objekt setzen. Werfen Sie einen genaueren Blick auf die <a> die Eigenschaften. Wir haben href, Klasse und rel-Attribut, das nichts anderes als ein normaler Link sieht. Wenn Sie sehen, haben wir das rel-Attribut zu einigen div Namen nämlich div1, div2 gegeben .. so weiter. Das heißt, wir wollen, dass die Reaktion des href in dieser divs geladen werden. Wie das zu tun? Wir fügen diese divs ersten
<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> |
Und der reale Teil jetzt - wir haben die Links eine Klasse "ajax_link". Wir werden nur dynamisch hinzufügen ajax Aktionen nur Links mit einer Klasse Namen genannt "ajax_link". Verdammt, wir nicht alle Links einer Seite auf ajax Aktionen haben, nicht wahr?
Also, auf Dokument Last würden wir dies tun.
. ready ( function ( ) { $ (Document). Ready (function () {
) . click ( function ( ) { $ ("A.ajax_link"). Klicken (function () {
this ) ; $ Current_link = $ (this);
$. Ajax ({
, Typ: "post",
( "href" ) , url:. $ current_link attr ("href"),
( e ) { Erfolg: function (e) {
+ $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (. "#" + $ Current_link attr ("rel")) html (e);
}
});
; return false;
});
}); |
Lassen Sie mich erklären das Skript ein bisschen. Die Veranstaltung ist eine document.ready Ereignis, das beim Laden der Seite ausgelöst wird. Und dann werden wir die Zuordnung irgendeine Art von Codes auf das Click-Ereignis der Links, die eine Klasse "ajax_link" haben. Dadurch current_link $ = $ (this); ermöglicht, den aktuellen Link-Objekt zur Verfügung innerhalb der Callback-Funktion. Und wir haben
$ ("#" + $ Current_link.attr ("rel")). Html (e)
was bedeutet, $ ("div_id") html (server_response) und wir haben die url des param $ ajax Funktion dynamisch mit url gesetzt:.. $ current_link.attr ("href"). So, jetzt alle diese Mittel "All diese Verbindungen, die eine Klasse haben" ajax_link "- Fügen Sie einen Click-Ereignishandler - dann ausführen und AJAX Antrag unter den Links href poperty und laden Sie die Antwort in einem div mit id übereinstimmt" rel "-Attribut des Verknüpfung ". Und das return false verhindert den Link funktionieren wie normale Verknüpfung 
Wanna see es eine Aktion? Hier geht es.
Und Sie können die Quelle downloaden als gut.
Im nächsten Abschnitt dieses kleine Tutorial werden wir mit der gleichen Sache, aber mit ein wenig Komfort.
Anwendung einfacher Verfahren
Alles bleibt fast das gleiche. Wir ändern gerade den ajax Verfahren hier. Also statt des Schreibens der ganze $. Ajax Block können wir die gleiche Sache mit dem folgenden zu erreichen.
. ready ( function ( ) { $ (Document). Ready (function () {
) . click ( function ( ) { $ ("A.ajax_link"). Klicken (function () {
+ $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (. "#" + $ (This) attr ("rel")) load ($ (this) attr ("href").);
; return false;
});
}); |
Es ist viel weniger kompliziert jetzt, nicht wahr? Die Load-Methode lädt die ajax Inhalte innerhalb des Elements es angebracht ist. Wenn $ ("# somediv_id"). Last ("mypage.php"), wird es versuchen, mypage.php den Inhalt in sie zu laden. Ganz einfach, nicht wahr? Aber ich schlage vor, Sie zu den wichtigsten Verfahren (wie im ersten Teil) zu gewöhnen.
In der Zip-Datei gibt es eine weitere Datei namens ajax2.php die diese methos die das gleiche Ergebnis hat demonstriert.
So ist AJAX nicht so schwer, wie es klingt, nicht wahr? Wenn Sie sehr fließend geworden mit AJAX Operationen, erstellen Sie Magie.
Danke fürs Lesen btw.
Recent Comments