Więc AJAX AJAX i AJAX, że to co robimy obszernie te dni. To oszczędza czas, zwiększa dynamikę i daje wrażenie korzystania z rodzaju aplikacji oprogramowania czuć. Nie jesteś wiele sposobów wykorzystania technologii AJAX w wielu bibliotekach. Ale jak widać ta strona jest dla jQuery, przyjrzymy się podstawowym, a może niektórych zwyczajów zaawansowanych technologii AJAX.
Czego nam potrzeba?
biblioteki jQuery (oczywiście)
Mały skrypt php
Miejmy zaczął mówić. W jQuery, istnieją w zasadzie 6 typów metody do zrobienia operacji AJAX. Są to
- $. Ajax (opcje)
- $. Get (url, data, callback)
- $. GetJSON (url, data, callback)
- $. GetScript (url, callback)
- load (url, data, callback)
- $. Post (url, dane, callback,
Niezależnie od liczby 1, wszystkie inne metody użyć $. Ajax wewnętrznie. To znaczy $. Ajax () jest nasza funkcja matka dla jQuery operacji AJAX. Przyjrzyjmy się jak $. Ajax () wygląda
msg ) ; } } ) ; Odpowiedź "+ msg);}});
To całkiem to. Parametr typu trwa "GET" lub "POST" co oznacza, że można wysłać requestion AJAX jako POST lub GET (wolałbym POST zawsze). Pozostałe parametry są dość wymowne, jeśli spojrzeć na kod ponownie.
Teraz mamy zamiar stworzyć mały skrypt AJAX, który odczytuje link znaczników Hiperłącze (<a>) i ładuje wniosek na niektórych elementów div w dokumencie.
Najpierw bierzemy normalną html dokumentu php który będzie wyglądać tak
<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> łącze testowe Ajax </ 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>
Teraz dodajmy kilka linków do dokumentu. Dla lepszego rodzaju menu z wyglądem użyjemy UL> LI oraz link. To będzie wyglądać tak
<ul id="nav"> <li> <a class="ajax_link" rel="div1" href="response.php?user=john"> obciążenia w Div 1 </ a> </ li> <li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> Załaduj Div 2 </ a> </ li> <li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> Załaduj Div 3 </ a> </ li> <li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> Załaduj Div 4 </ a> </ li> </ Ul>
Jak widać mamy umieścić linki w elementów listy wewnątrz nieuporządkowaną obiektu listy. Przyjrzyj się bliżej na tagu <a> jego właściwości. Mamy href, klasy i atrybutu rel który wygląda nic innego niż zwykły link. Jeśli widzisz, daliśmy atrybut rel niektórych nazw div mianowicie div1 i div2 .. tak dalej. Oznacza to, że chcemy reakcję href zostać załadowane do tych DIV. Jak to zrobić? Dodajmy te DIV +1-szy
<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>
I prawdziwy część już teraz - mamy podane linki klasy "ajax_link". Będziemy tylko dynamicznie dodawać ajax działania tylko łącza o nazwę klasy o nazwie "ajax_link". Cholera, nie wszystkie linki o stronie, aby mieć ajax działania, prawda?
Tak więc, od obciążenia dokumentów chcielibyśmy to zrobić.
. ready ( function ( ) { $ (Document). Ready (function () { ) . click ( function ( ) { $ ("A.ajax_link"). Click (function () { this ) ; $ Current_link = $ (this); $. Ajax ({ , typ: "post", ( "href" ) , url: $. current_link attr ("href"), ( e ) { success: function (e) { + $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (. "#" + $ Current_link attr ("rel")) html (e); } }); ; return false; }); });
Pozwólcie, że wyjaśnię skrypt trochę. Document.ready impreza jest wydarzeniem, które jest wywoływane na stronie obciążenia. A potem mamy przypisanie jakieś kody na click przypadku linków, które mają klasy "ajax_link". Robi to $ current_link = $ (this); pozwala mieć bieżący obiekt Link być dostępne w funkcji zwrotnej. I mamy
$ ("#" + $ Current_link.attr ("rel")). Html (e)
co oznacza, $ ("div_id") html (server_response) i mamy zestaw param url funkcji $ ajax dynamicznie URL: a. $ current_link.attr ("href"). Więc teraz wszystkie te środki "Wszystkie te linki, które mają klasy" ajax_link "- Dodawanie obsługi zdarzenia Click - następnie wykonać i żądania AJAX biorąc linki href poperty i załadować odpowiedź na div id którego pasuje do" REL "atrybut Link ". I return false uniemożliwia pracę łącza jak normalnego linku 
Chcesz zobaczyć jej działanie? Here It Goes.
I można pobrać kod źródłowy , jak również.
W następnej części tego małego tutorialu będziemy używać to samo, ale z odrobiną komfortu.
Zastosowanie łatwiejszą metodę
Wszystko pozostaje prawie taka sama. Będziemy po prostu zmienić metodę ajax tutaj. Więc zamiast pisać całą $. Blok ajax możemy osiągnąć to samo z poniższych.
. ready ( function ( ) { $ (Document). Ready (function () { ) . click ( function ( ) { $ ("A.ajax_link"). Click (function () { + $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (. "#" + $ (This) attr ("rel")) load ($ (this) attr ("href").); ; return false; }); });
To dużo mniej skomplikowane, prawda? Metoda load ładuje ajax zawartości wewnątrz elementu jest on dołączony. Jeśli $ ("# somediv_id"). Obciążenie ("mypage.php"), to będzie próbował załadować treść mypage.php jest w nim. Całkiem proste, prawda? Ale ja proponuję przyzwyczaić się do głównej metody (pokazany w pierwszej części).
W pliku zip jest jeszcze jeden plik o nazwie ajax2.php co pokazuje ten Methos, który ma ten sam wynik.
Więc, AJAX nie jest tak trudne jak się wydaje, prawda? Kiedy stajesz się bardzo płynnie z operacji AJAX, będziesz tworzyć magię.
Dziękuję za przeczytanie btw.
Najnowsze komentarze