So AJAX AJAX und AJAX, das ist, was wir tun, ausgiebig in diesen Tagen. Es spart Zeit, fügt Dynamik und gibt Ihnen ein Gefühl der Verwendung einer Software-Anwendung Art von 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 zu suchen.
Was meinst du wir brauchen?
jQuery-Bibliothek (natürlich)
Ein kleines PHP-Skript
Lassen Sie uns zu sprechen begann. In jQuery, gibt es grundsätzlich 6 Arten von Verfahren, um AJAX-Operationen zu tun. Dies sind die
- $. Ajax (Optionen)
- $. Get (url, Daten, Rückruf)
- $. GetJSON (url, Daten, Rückruf)
- $. GetScript (url, callback)
- Last (url, Daten, Rückruf)
- $. Post (url, Daten, Rückruf,
Neben der Nummer 1, auch alle anderen Methoden $. Ajax intern. Das heißt also $. Ajax ()-Funktion ist unsere Mutter 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) { "Server Response " + msg ) ; alert ("Server Response" + msg); } });
Das ist ziemlich sie. Der type-Parameter nimmt "GET" oder "POST", dh Sie können AJAX requestion als POST oder GET zu senden (ich würde immer lieber POST). Die übrigen Parameter sind ziemlich selbsterklärend, wenn Sie einen Blick auf den Code nehmen wieder.
Jetzt werden wir eine kleine AJAX-Skript, das die Verbindung von Hyperlink-Tags (<a>) liest und lädt die Anfrage auf einigen div-Elemente im Dokument zu machen.
Zuerst nehmen wir einen normalen HTML-Dokument, das von PHP 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="de"> <head> <title> Ajax Link-Test </ 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>
Jetzt fügen wir einige Links auf das Dokument. Für eine bessere Art von Menü Look werden wir eine UL> LI und Link. Das wird dann so aussehen
<ul id="nav"> <li> <a class="ajax_link" rel="div1" href="response.php?user=john"> Load in Div 1 </ a> </ li> <li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> Load in Div 2 </ a> </ li> <li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> Load in Div 3 </ a> </ li> <li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> Load 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, class und rel-Attribut, das nichts anderes als ein normaler Link aussieht. Wenn Sie sehen, haben wir das rel-Attribut zu einigen div Namen nämlich DIV1, DIV2 gegeben .. so weiter. Das heißt, wir wollen die Antwort des href in diesen divs geladen werden. Wie das zu tun? Fügen wir 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 Realteil jetzt - wir haben die Links eine Klasse "ajax_link". Wir werden nur dynamisch hinzuzufügen Ajax-Aktionen nur Links, die eine Klasse Namen gerufen "ajax_link". Verdammt, wir wissen nicht alle Links einer Seite an Ajax-Aktionen haben, tun wir?
Also, auf dem Dokument Belastung 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 etwas. Die document.ready Veranstaltung ist ein Ereignis, das beim Laden der Seite ausgelöst wird. Und dann werden wir die Zuordnung irgendeine Art von Codes auf dem Click-Ereignis der Links, die eine Klasse "ajax_link" haben. Dadurch current_link $ = $ (this); ermöglicht, den aktuellen Link-Objekt zur Verfügung stehen 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 festgelegt:.. $ current_link.attr ("href"). So, jetzt all diese Mittel "alle diese Links, die eine Klasse haben" ajax_link "- Fügen Sie einen Click-Ereignishandler - dann ausführen und AJAX Antrag, wobei die Links href poperty und laden Sie die Antwort in ein div, dessen ID mit der" rel "-Attribut des Link ". Und das return false verhindert, dass der Link funktionieren wie normale Link 
Willst du sehen, es mit einer Klage? Hier geht.
Und Sie können die Quelle zum Download sowie.
Im nächsten Abschnitt dieses kleine Tutorial werden wir mit der gleichen Sache, aber mit ein wenig Komfort.
Die Anwendung einfacher Verfahren
Alles bleibt nahezu gleich. Wir werden einfach nur die AJAX-Methode hier. Also anstatt zu schreiben, das 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 jetzt viel weniger kompliziert, nicht wahr? Die Load-Methode lädt die AJAX-Inhalt innerhalb des Elements es angebracht ist. Wenn $ ("# somediv_id"). Last ("meineseite.php"), wird es versuchen, meineseite.php den Inhalt in sie zu laden. Ziemlich simpel, oder? Aber ich schlage vor, Sie an die Main-Methode (gezeigt im ersten Teil) zu gewöhnen.
In der Zip-Datei gibt es eine weitere Datei mit dem Namen ajax2.php , die diese Methos, die das gleiche Ergebnis hat demonstriert.
Deshalb ist AJAX nicht so schwer wie es klingt, nicht wahr? Wenn Sie sehr fließend geworden mit AJAX-Operationen erstellen Sie zaubert.
Danke fürs Lesen btw.
Recent Comments