Poniższy diagram pomoże Ci zrozumieć główne punkty:
$(dokument).ready(function())( $(.btn-slide”).click(function())( $("#panel").slideToggle("slow"); $(this).toggleClass („aktywny”);
Magiczne zniknięcia Ten przykład pokaże jak pięknie i łatwo można usuwać i rozpuszczać elementy (patrz przykład):
Kiedy klikniemy na zdjęcie , element nadrzędny zostanie znaleziony, a jego krycie będzie powoli zmieniać się z opacity=1.0 na opacity=hide:
$(dokument).ready(function())( $(.pane .delete").click(function())( $(this).parents(.pane").animate(( krycie: „ukryj” ), "powolny");
Połączona animacja Teraz przykład jest bardziej złożony, ale pomoże ci lepiej zrozumieć jQuery. Zaledwie kilka linijek kodu sprawi, że kwadrat się przesunie, zmieni rozmiar i przezroczystość. (patrz przykład):
$(dokument).ready(function())( $(.run").click(function())( $("#box").animate((krycie: "0,1", po lewej: "+=400 ") , 1200) .animate((krycie: "0,4", góra: "+=160", wysokość: "20", szerokość: "20"), "wolno") .animate((krycie: "1", po lewej: „0”, wysokość: „100”, szerokość: „100”), „wolno”) .animate(((góra: „0”), „szybko”) .slideUp() .slideDown(„wolno”) return FAŁSZ; )); ));
Akordeon #1 Przykład realizacji „akordeonowej”. (patrz przykład)
Elementy wewnątrz.
Po kliknięciu nagłówka następny w nim element
Efekt slideToggle zostanie zastosowany, następnie do wszystkich pozostałych elementów
Efekt slideUp zostanie zastosowany. Poniższa akcja zmienia klasę nagłówka na „aktywną”, następnie szukamy wszystkich pozostałych nagłówków i usuwamy z nich klasę „aktywną”
$(dokument).ready(function())( $(.akordeon h3:pierwszy").addClass("aktywny"); $(.akordeon p:not(:pierwszy)").hide(); $ ( ".accordion h3").click(function())( $(this).next("p").slideToggle("slow") .siblings("p:widoczne").slideUp("wolno"); $(to).toggleClass("aktywne"); $(to).rodzeństwo("h3").removeClass("aktywne" ));
Akordeon #2 Ten przykład jest podobny do poprzedniego, z tą tylko różnicą, że wskazujemy gniazdo, które jest domyślnie otwarte. (patrz przykład)W CSS mamy to określone dla wszystkich elementów
Wyświetlacz: brak. Teraz musimy otworzyć trzeci panel. Aby to zrobić, możemy zapisać następującą funkcję $(".accordion2 p").eq(2).show(), gdzie eq oznacza równość. Pamiętaj, że indeksowanie zaczyna się od zera:
$(dokument).ready(function())( $(.accordion2 h3").eq(2).addClass("active"); $(.accordion2 p").eq(2).show() ; $(.accordion2 h3").click(funkcja())( $(this).next("p").slideToggle("wolno") .siblings("p:widoczne").slideUp("wolno" ); $(this).toggleClass("aktywne"); $(this).rodzeństwo("h3").removeClass("aktywne" ));
Animacja zdarzenia najechania #1 Ten przykład pomoże Ci stworzyć bardzo piękną animację zdarzenia najechania (mam nadzieję, że wiesz, co to jest?), (patrz przykład):
Po najechaniu kursorem na element menu (najechanie myszką) wyszukuje on następny element i animuje jego przezroczystość i położenie:
$(dokument).ready(function())( $(.menu a").hover(function() ( $(this).next("em").animate((krycie: „pokaż”, góra: " -75"), "wolno"); ), funkcja() ( $(this).next("em").animate((krycie: "ukryj", góra: "-85"), "szybko") ; ));
Animacja zdarzenia najechania #2 Ten przykład jest nieco bardziej skomplikowany niż poprzedni: atrybut linktitle służy do generowania podpowiedzi (patrz przykład)
$(dokument).ready(function())( $(.menu2 a”).append(""); $(.menu2 a").hover(function() ( $(this).find(" em ").animate((krycie: "pokaż", góra: "-75"), "wolno"); var hoverText = $(this).attr("title"); $(this).find("em " ).text(hoverText); ), funkcja() ( $(this).find("em").animate((krycie: "ukryj", góra: "-85"), "szybko"); )) ; ));
Klikalne bloki Ten przykład pokazuje, jak sprawić, aby blok tekstu był klikalny, a nie tylko łącze (zobacz przykład):
$(dokument).ready(function())( $(.pane-list li").click(function())( window.location=$(this).find("a").attr("href "); zwróć fałsz; ));
Składane panele Cóż, teraz połączmy trochę poprzednie przykłady i stwórzmy serię składanych paneli (podobnie jak zorganizowana jest skrzynka odbiorcza w Gmailu). (patrz przykład)
$(document).ready(function())( //ukryj treść wiadomości po pierwszej $(.message_list .message_body:gt(0)").hide(); //ukryj treść wiadomości po piątej $(" .lista_wiadomości li:gt(4).hide(); //przełącz treść_wiadomości $(".message_head").click(function())( $(this).next(.message_body").slideToggle(500) return false; )); //zwiń wszystkie wiadomości $(.collpase_all_message").click(function())( $(.message_body").slideUp(500) return false; )); " .show_all_message").click(function())( $(this).hide() $(.show_recent_only").show() $(.message_list li:gt(4)").slideDown() return false; )); //pokaż tylko najnowsze wiadomości $(".show_recent_only").click(function())( $(this).hide() $(.show_all_message").show() $(".message_list li:gt (4)").slideUp() return false; )); ));
Imitowanie backendu „a Wordpressa”a Myślę, że wielu czytelników zetknęło się z administracyjną częścią wordpressa, a dokładniej z edycją komentarzy. Spróbujmy zrobić coś podobnego. Aby animować kolor tła potrzebujemy odpowiedniej wtyczki do jQuery. (patrz przykład)
//nie zapomnij o dołączeniu wtyczki Color Animations $(document).ready(function())( $(.pane:even").addClass("alt"); $(.pane .btn-delete " ).click(function())( alert("Ten komentarz zostanie usunięty!"); $(this).parents(.pane").animate(( kolor tła: "#fbc7c7" ), "szybko") .animate (( krycie: „ukryj” ), „wolno”) return false )); $(.pane .btn-unapprove").click(function())( $(this).parents(.pane" ). animate(( kolor tła: "#ffff568" ), "szybki") .animate((kolor tła: "#ffffff" ), "wolny") .addClass("spam") return false )); .click(function())( $(this).parents(.pane").animate(( kolor tła: "#dafda5" ), "szybki") .animate((kolor tła: "#ffffff" ), "wolno ") .removeClass("spam") return false )); $(".pane .btn-spam").click(function())( $(this).parents(.pane"). animate(( kolor tła : "#fbc7c7" ), "szybko") .animate(( krycie: "ukryj" ), "wolno") return false ));
Galeria zdjęć Najprostszy przykład wdrożenia galerii, bez przeładowywania strony. (patrz przykład)
Wykonujemy następujące czynności:
$(dokument).ready(function())( $("h2").append("") $(".kciuki a").click(function())( var dużaŚcieżka = $(this).attr( "href "); var dużyAlt = $(this).attr("tytuł"); $("#largeImg").attr(( src: dużaŚcieżka, alt: dużaAlt )); („(” + dużyAlt + „)”); zwróć fałsz; ));
Stylizowanie linków Większość zwykłych przeglądarek łatwo rozumie, kiedy chcemy, aby stylizowały linki do różnych typów plików, w tym celu możemy skorzystać z następującej reguły CSS: a (… ). Ale jak zwykle IE6 jest mądry i bystry, dlatego damy mu kule za pomocą jQuery. (patrz przykład)
$(dokument).ready(function())( $("a[@href$=pdf]").addClass("pdf"); $("a[@href$=zip]").addClass(" zip "); $("a[@href$=psd]").addClass("psd"); $("a:not([@href*=http://www.webdesignerwall.com])") . not("") .addClass("zewnętrzne") .attr(( cel: "_blank" ));
Możesz także przejrzeć wszystkie przykłady lub pobrać tutorial jQuery dla początkujących.
Wiele przydatnych linków na temat jQuery znajdziesz także na stronie: http://blog.termit.name/jquery/
Być może komuś innemu przyda się biblioteka jQuery-PHP
Tagi: Dodaj tagi
Z pewnością słyszałeś o wspaniałej bibliotece Javascript o nazwie jQuery. Czym właściwie jest jQuery?
Jak ułatwić życie web developerowi? Gdzie zacząć? jQuery sprawia, że pisanie JavaScript staje się przyjemniejsze i łatwiejsze. Dzięki tej bibliotece wiele dość złożonych aspektów JavaScript można łatwo zaimplementować w dowolnej aplikacji.
Dzisiejsza lekcja pokaże Ci jak rozpocząć pracę z jQuery i jak napisać swój pierwszy skrypt.
Co to jest jQuery?
jQuery to bardzo lekka biblioteka JavaScript (niektórzy nazywają ją frameworkiem), która eliminuje ból głowy podczas pisania kodu JavaScript. Posiada wiele bardzo zaawansowanych funkcji, takich jak śledzenie DOM, dodawanie pięknych efektów i animacji do elementów, super proste techniki i metody Ajax. Na stronie głównej witryny jQuery, moim zdaniem najdokładniejszy opis:
jQuery to szybka i zwięzła biblioteka, która upraszcza obsługę zdarzeń, animację i interakcję Ajax w celu szybszego tworzenia stron internetowych. jQuery ma na celu zmianę sposobu pisania JavaScript.
Jakie są zalety jQuery?
Rzućmy okiem na niektóre zalety i właściwości tego frameworka:
Ilość kodu (wymagana do uruchomienia skryptu) jest znacznie zmniejszona w porównaniu do JavaScript, co z kolei oznacza mniej czasu poświęconego i bardziej czytelny kod. W pozostałej części artykułu omówimy kilka przykładów.
Znacznie łatwiejszy do zrozumienia kod (w przeciwieństwie do JavaScript). W naszym świecie im szybciej zakończysz proces programowania, tym więcej czasu możesz przeznaczyć na inne cele.
Bardzo wygodna dokumentacja i aktywna społeczność, zawsze gotowa do pomocy w razie potrzeby.
Korzystanie z Ajaxu staje się znacznie łatwiejsze. Potrzebujesz tylko 5 linii kodu (czasami mniej), aby utworzyć proste żądanie Ajax.
Ogromna liczba wtyczek, dzięki którym możesz zrobić prawie wszystko.
jQuery jest fajne :)
Jak zacząć?
Przede wszystkim musisz odwiedzić stronę główną oficjalnej witryny jQuery i pobrać najnowszą wersję tego frameworka. Po pobraniu musisz wgrać ten plik na swój hosting i wpisać link do tego pliku w nagłówku dokumentu.
Alternatywnie możesz skorzystać z pomocy świetnego Google'a i umieścić link do ich serwera, gdzie zawsze znajdują się najnowsze wersje wszelkich frameworków. Niezbędny link można znaleźć.
Czy dokument jest gotowy?
Aby wykonać nasz pierwszy skrypt jQuery, musimy owinąć cały skrypt w funkcję. Ta funkcja zostanie wykonana, gdy DOM będzie całkowicie gotowy (kiedy „dokument będzie gotowy” - dosłowne tłumaczenie z języka angielskiego). Należy pamiętać, że jest to bardzo podobne do popularnego zdarzenia „onload”, ale nie jest tym samym. Spójrzmy na przykład:
$(dokument).ready(function())( //tutaj kod ));
Powyżej mówimy jQuery, aby wykonał dowolny kod wewnątrz funkcji, przy całkowicie gotowym modelu DOM. Ma to swoje zalety, mimo że dla wielu może to nie być jasne. Przede wszystkim stosując tę technikę całkowicie oddzielamy Javascript od HTML. Po drugie, nie musimy czekać, aż strona się w pełni załaduje, wystarczy DOM, aby się załadować.
Dla leniwych programistów lub tych, którzy liczą każdy znak, możesz jeszcze bardziej skrócić powyższy kod:
$(funkcja())( //tutaj kod ));
Twój pierwszy skrypt jQuery
Wiemy już, jak odwołać się do biblioteki. Rozumiemy także trochę funkcję document.ready. Teraz czas na napisanie prostego skryptu.
Uczyńmy to tak prostym, jak to tylko możliwe. W tym przykładzie utwórzmy stronę z tekstem i cytatem na końcu. Chcemy wyświetlić cytat tylko wtedy, gdy użytkownik kliknie przycisk. Spójrz poniżej na wymagany do tego kod:
$(dokument).gotowy(funkcja())(
var mój Cytat = $("#mój_cytat");
mój Cytat.hide();
$(".przycisk").click(funkcja())(
myQuote.show(500);
});
});
Przyjrzyjmy się bliżej całemu kodowi.
Jak wspomniano powyżej, cały kod do wykonania umieściliśmy w funkcji $document.ready().
Do zmiennej myQuote przypisujemy identyfikator naszej wyceny (my_quote). Teraz mamy dostęp do cytatu o identyfikatorze my_quote.
To wszystko. Po naciśnięciu przycisku przez 0,5 sekundy wyświetli się cytat. Bardzo łatwe, prawda?
Ciąg dalszy....
Dziękuję za uwagę! Wszystkiego najlepszego!
AJAX to grupa technologii wykorzystywana w tworzeniu stron internetowych do tworzenia interaktywnych aplikacji. AJAX umożliwia przesyłanie danych z serwera bez konieczności przeładowywania strony. W ten sposób można uzyskać naprawdę imponujące rezultaty. A biblioteka jQuery znacznie upraszcza implementację AJAX przy użyciu wbudowanych metod.
Aby zaimplementować technologię, użyj metody $.ajax lub jQuery.ajax:
$.ajax(właściwości) lub $.ajax(url [, właściwości])
Drugi parametr został dodany w wersji 1.5 jQuery.
url - adres żądanej strony;
właściwości - właściwości żądania.
Pełną listę opcji znajdziesz w dokumentacji jQuery.
W tym samouczku użyjemy kilku najczęściej używanych parametrów.
sukces (funkcja) - funkcja wywoływana po pomyślnym zakończeniu żądania. Funkcja otrzymuje od 1 do 3 parametrów (w zależności od wersji użytej biblioteki). Ale pierwszy parametr zawsze zawiera dane zwrócone z serwera.
dane (obiekt/string) - dane użytkownika przekazywane do żądanej strony.
dataType (string) - możliwe wartości: xml, json, script lub html. Opis typu danych oczekiwanych w odpowiedzi serwera.
type (string) - typ żądania. Możliwe wartości: GET lub POST. Wartość domyślna: POBIERZ.
url (string) - Adres URL żądania.
Przykład 1Łatwy transfer tekstu.
$.ajax(( url: "response.php?action=sample1", sukces: funkcja(dane) ( $(.results").html(data); ) ));
Odpowiedź zawiera element div .result.
Czekamy na odpowiedź
Serwer po prostu zwraca ciąg:
Echo "Przykład 1 - transfer zakończony pomyślnie";
Przykład 2Przekazujemy dane użytkownika do skryptu PHP.
$.ajax(( typ: „POST”, adres URL: „response.php?action=sample2”, dane: „imię=Andrew&nickname=Aramis”, sukces: funkcja(dane)( $(.results”).html( dane);
Serwer zwraca ciąg znaków, do którego wstawiane są przesłane dane:
Echo "Przykład 2 - transfer zakończony pomyślnie. Parametry: nazwa = " . $_POST["nazwa"] . ", pseudonim= " . $_POST["pseudonim"];
Przykład 3Przekazywanie i wykonywanie kodu JavaScript
$.ajax((dataType: „skrypt”, url: „response.php?action=sample3”, ))
Serwer wykonuje kod:
Echo "$(.results").html("Przykład 3 - wykonanie JavaScript");";
Przykład 4Używamy XML-a. Przykład można wykorzystać do pracy z zewnętrznym XML, na przykład kanałem RSS.
$.ajax((dataType: "xml", url: "response.php?action=sample4", sukces: funkcja(xmldata)( $(.results").html(""); $(xmldata).find („element”).each(funkcja())( $(” „).html($(this).text()).appendTo(.results”); ) ));
Serwer powinien zwrócić kod XML:
Header("Typ zawartości: aplikacja/xml; zestaw znaków=UTF-8");
echo maxheight) ( maxheight = $(this).height(); ) )); $("div.col").wysokość(maks.wysokość);Paski stołowe (zebra)
Kiedy dane są wyświetlane w formie tabeli, różne kolory w każdym wierszu zdecydowanie poprawiają czytelność. Oto fragment automatycznego dodawania klasy CSS do co drugiego (parzystego) wiersza tabeli.
$(dokument).ready(function())( $("tabela tr:parzysty").addClass("pasek"); ));Częściowa aktualizacja strony
Jeśli potrzebujesz zaktualizować tylko część strony, te 3 linijki kodu na pewno Ci pomogą. W tym przykładzie element div o identyfikatorze #refresh jest automatycznie odświeżany co 10 sekund.
SetInterval(funkcja() ( $("#refresh").load(location.href+" #refresh>*",""); ), 10000); // milisekundy oczekiwaniaWstępne ładowanie obrazów
jQuery ułatwia wstępne ładowanie obrazów w tle, dzięki czemu odwiedzający nie muszą wiecznie czekać na pojawienie się obrazów, które chcą. Kod jest gotowy do użycia, wystarczy edytować listę obrazków w linii 8.
$.preloadImages = funkcja() ( for(var i = 0; i maxWidth)( stosunek = maxWidth / szerokość; $(this).css("szerokość", maxWidth); $(this).css("wysokość", wysokość * stosunek); wysokość = wysokość * stosunek; ) var szerokość = $(this).width(); var wysokość = $(this).height(); if(wysokość > maxWysokość)( stosunek = maxWysokość/wysokość; $ (this).css("wysokość", maxHeight); $(this).css("szerokość", szerokość * stosunek); //$("#obraz strony treści").show(); // ZMIANA ROZMIARU OBRAZU ));Automatyczne ładowanie treści poprzez przewijanie
Niektóre witryny, takie jak Twitter, ładują treść poprzez przewijanie. Oznacza to, że cała treść jest dynamicznie ładowana na stronie podczas przewijania w dół.
Oto przykład, jak możesz zastosować taki efekt na swojej stronie internetowej.Ładowanie Var = false; $(okno).scroll(function())( if((($(okno).scrollTop()+$(okno).height())+250)>=$(dokument).height())( if ( ładowanie == fałsz)( ładowanie = prawda; $("#loadingbar").css("display","block"); $.get("load.php?start="+$("#loaded_max") val(), funkcja(załadowana)( $("treść").append(załadowana); $("#loaded_max").val(parseInt($("#loaded_max").val())+50); $ („#pasek ładowania”).css(„wyświetlanie”, „brak”); ładowanie = fałsz ) ) ); $(dokument).ready(function() ( $("#loaded_max").val(50); ));
Sprawdź, czy obraz się załadował ").load(funkcja () ( alert("załadowany obraz"); )).error(funkcja () ( alert("błąd podczas ładowania obrazu"); )).attr("src", imgsrc);
W niektórych przypadkach bardzo przydatne może być sortowanie długiej listy alfabetycznie. Ten fragment akceptuje dowolną listę i sortuje ją.
$(funkcja() ( $.fn.sortList = funkcja() ( var mojalista = $(this); var listitems = $("li", mojalista).get(); listitems.sort(funkcja(a, b) ( var compA = $(a).text().toUpperCase(); var compB = $(b).text().toUpperCase(); return (compA< compB) ? -1: 1; }); $.each(listitems, function(i, itm) { mylist.append(itm); }); } $("ul#demoOne").sortList(); });
Ten artykuł zawiera przykłady kodu, którego używam do wysyłania żądań ajax do serwera za pomocą jQuery. Ich zadania mogą być różne, dlatego można zastosować dla nich różne funkcje, które upraszczają pisanie kodu.
Żądanie danych HTML za pomocą funkcji LoadTo najprostsze żądanie ajaxowe poprzez jQuery z odebraniem danych HTML i wstawieniem ich do elementu dom z id="result" (zastępowanie zawartości elementu):
$("#wynik").load("");
Bardziej zaawansowany przypadek użycia obciążenia:
$("#result").load("", (par1:wartość1, par2:wartość2, ...), funkcja(odpowiedź, status, xhr) ( if (status == "sukces") ( alert("Gotowe "); ) else ( alert("Błąd: " + xhr.status + " " + xhr.statusText); ) ));
W tym przykładzie do serwera przekazywane są również parametry, a po otrzymaniu odpowiedzi sprawdzane jest, czy nie wystąpił błąd (np. nie otrzymano odpowiedzi z serwera) i wykonywane są różne działania.
Żądania Ajax z funkcjami GET i POSTFunkcje te wysyłają żądanie Ajax przy użyciu metod http get i post. Podam kilka przykładów ich zastosowania.
$.get("", // adres do wysłania żądania (par1:val1, par2:val2, ...), // przesłanie części danych za pomocą funkcji żądania (data) ( // niektóre akcje z tymi otrzymanymi od dane danych serwera));
Nie jest wymagany transfer danych ani wykonywanie jakichkolwiek działań po otrzymaniu odpowiedzi z serwera, tj. w takim przypadku linie 3 i 4-6 można w razie potrzeby usunąć i tym samym jeszcze bardziej skrócić kod.
Rodzaj danych odbieranych z serwera można określić dodając dataType (patrz niżej) - domyślnie jest on ustalany automatycznie.
Korzystanie z postu jest podobne, ale w poniższym przykładzie używam wywołania funkcji po otrzymaniu odpowiedzi z serwera.
$.post("", (par1:val1, par2:val2, ...), onSuccess); funkcja onSuccess(data) ( // niektóre akcje na danych otrzymanych z serwera data )
W rzeczywistości funkcje get i post są skróconymi wersjami funkcji ajax, co omówię poniżej.
Pobieranie danych JSON za pomocą getJSONgetJSON to skrócona wersja żądania ajax wykorzystującego metodę GET i odbierającego dane w postaci json. Metoda jest wygodna na przykład do uzyskania pewnego rodzaju tablicy danych, a następnie pracy z nią.
$.getJSON("", (par1:val1, par2:val2, ...)).success(function(data) ( // zrób coś z danymi, na przykład przejrzyj je i wypisz: for (var i =0; i 10, "tekst" => "linia testowa 1" $arr = tablica("id" => 20, "tekst" => "linia testowa 2"); => "linia testowa 3"); echo json_encode($arr);
W ten sam sposób możesz przesyłać obiekty stdClass z serwera, konwertując je na ciąg json.
Proste żądanie ajax za pośrednictwem jQuery przy użyciu funkcji AJAXTeraz podam przykład prostego żądania get wykorzystującego funkcję ajax i odbierającego dane HTML.
$.ajax(( url: "", typ danych: "html", sukces: funkcja(dane) ( // niektóre akcje na otrzymanych danych) ));
Żądanie do serwera jest wykonywane przy użyciu metody get, ponieważ parametrem odpowiedzialnym za typ żądania jest domyślnie GET;
Bardziej złożony przykład żądania ajax przy użyciu jQueryPrzykład realizacji żądania z wykorzystaniem funkcji ajax z transmisją danych metodą post i przetwarzaniem zdarzeń. Poniżej opiszę dodatkowe parametry, które są najczęściej wykorzystywane.
$.ajax(( url: "", typ: "post", dane: "", // może być ciągiem znaków lub możesz na przykład tak: $("input, input:checked, input:checked , wybierz, obszar tekstowy") typ danych: "json", beforeSend: funkcja() ( $("#sendajax").button("loading"); ), ukończ: funkcja() ( $("#sendajax").button („reset”) ; ), sukces: funkcja (json) ( // niektóre akcje na odebranych danych), błąd: funkcja (xhr, ajaxOptions, rzuconyError) ( alert(thrownError + „\r\n” + xhr.statusText + "\r \n" + xhr.responseText);
Przycisk Prześlij:
Wysłać
W powyższym przykładzie po kliknięciu w przycisk najpierw zmienia się stan przycisku (tekst na nim zmienia się na „Wysyłanie...” i staje się nieaktywny), co odbywa się za pomocą parametru beforeSend. Następnie wysyłane jest żądanie z przekazaniem niezbędnych danych. Po otrzymaniu odpowiedzi z serwera stan przycisku powraca do poprzedniego stanu (tekst zmienia się na „Wyślij” i staje się aktywny). Odpowiedź jest odbierana w postaci danych json.
Opiszę pokrótce parametry wysyłania żądania ajax, które najczęściej mogą się przydać:
| adres URL | Adres wysłania żądania Ajax |
| typ | Jak wysłać żądanie GET lub POST |
| dane | Dane wysyłane na serwer. Może występować ciąg znaków z parametrami i ich wartościami w formacie par1=val1&par2=val2&..., obiekt jQuery, np. $("input"), lub inne dane. |
| Typ danych | Rodzaj danych otrzymywanych z serwera. Może to być HTML, JSON, tekst, skrypt i XML. |
| kryjówka | Buforowanie żądania przez przeglądarkę (false - nie buforuj). |
| asynchroniczny | Asynchroniczna realizacja żądania, tj. program kontynuuje działanie bez oczekiwania na odpowiedź serwera. Jeśli podasz wartość false, żądanie zostanie wykonane synchronicznie, a strona nie będzie na nic odpowiadać, dopóki nie otrzyma odpowiedzi z serwera. |
| Dane procesu | Konwersja przesłanych danych do formatu URL. Jeśli chcesz, aby dane nie były konwertowane, ustaw wartość false. Na przykład podczas wysyłania obrazu na serwer lub danych XML. |
| typ zawartości | Typ przesyłanych danych, domyślnie „application/x-www-form-urlencoded; charset=UTF-8”. Jeśli podasz false, to typ nie zostanie przekazany w nagłówku, co może być konieczne np. przy wysyłaniu obrazu na serwer. |
| przedWyślij | Funkcja wykonywana przed wysłaniem żądania ajax. |
| kompletny | Funkcja wykonywana po otrzymaniu odpowiedzi z serwera (dowolnej odpowiedzi, pomyślnej lub nie). |
| sukces | Funkcja wykonywana, gdy żądanie zakończy się pomyślnie. |
| błąd | Funkcja do wykonania w przypadku błędu. |
Poniżej podam jeszcze kilka przykładów wykorzystania żądań ajaxowych.
Przesłanie formularza ze wszystkimi danymi za pomocą żądania ajax poprzez jQueryPrzykładowy kod formularza HTML:
Twoje imię:
Kod JavaScript:
$("#myform").submit(function(e) ( e.preventDefault(); $.ajax(( typ: $(this).attr("method"), url: "", dane: $(this ).serialize(), async: false, dataType: "html", sukces: funkcja(wynik)( alert("Formularz przesłany"); ) ));
Aby zapobiec ponownemu załadowaniu strony po kliknięciu przycisku „wyślij”, najpierw zastępujemy domyślne działania przeglądarki za pomocą funkcji e.preventDefaults() .
W parametrze data przekazujemy wszystkie pola formularza za pomocą $(this).serialize() - funkcja ta konwertuje wszystkie wejścia i selekcje na ciąg znaków odpowiedni do przesłania na serwer.
Wykorzystano tu także parametr async: false, dzięki czemu do czasu wysłania formularza na serwer nie można nic więcej kliknąć ani zrobić.
Wysyłanie obrazu lub pliku z żądaniem ajax za pośrednictwem jQueryProblem przesłania pliku lub obrazu na serwer bez przeładowania strony pojawia się dość często. W tym przykładzie przyjrzę się jednocześnie 2 funkcjom: wybraniu pliku poprzez kliknięcie przycisku, który można dowolnie zaprojektować oraz wyświetleniu postępu podczas przesyłania pliku na serwer za pomocą żądania Ajax.
Kod HTML będzie wyglądał następująco:
Prześlij obraz
#addfile ( pozycja: względna; przepełnienie: ukryty; szerokość: 180px; wysokość: 34px; ) #load_file ( pozycja: bezwzględna; góra: 0; lewa: 0; szerokość: 180px; wysokość: 34px; rozmiar czcionki: 0px; krycie : 0; filtr: alfa(opacity:0); #load_file:hover (kursor: wskaźnik;)
Istotą pomysłu jest to, że na górze przycisku wyświetlane jest standardowe wejście służące do wyboru pliku, ale jest ono całkowicie przezroczyste i ma takie same wymiary jak przycisk. W ten sposób użytkownik widzi przycisk, ale kiedy najedzie na niego kursorem, tak naprawdę najeżdża na dane wejściowe. Odpowiednio, kiedy kliknie przycisk, faktycznie zostanie naciśnięte wejście wyboru pliku. Aby zapobiec miganiu kursora po wybraniu pliku, rozmiar czcionki jest ustawiony na 0px.
Teraz kod javascript do wysyłania pliku na serwer wyświetlający postęp:
$(funkcja() ( $("#load_file").on("change", loadingfile); )); funkcja loadingfile() ( $("#addfile span").html("załadowano 0%"); files = $("#load_file").files; var formularz = new FormData(); form.append("prześlij" , pliki); $.ajax((url: "", typ: "POST", dane: formularz, pamięć podręczna: false, ProcessData: false, contentType: false, xhr: funkcja() ( var myXhr = $.ajaxSettings.xhr (); if (myXhr.upload) ( myXhr.upload.addEventListener("postęp",ShowProgress, false); ) return myXhr; ), ukończ: funkcja(dane)( $("#addfile span").html(" Załaduj obraz"); $("#load_file").val(""); ), sukces: funkcja(wiadomość)(alert(wiadomość); ), błąd: funkcja(jqXHR, textStatus, errorThrown) ( alert(textStatus+" "+errorThrown); ) )); ) funkcja ShowProgress(e) ( if(e.lengthComputable)( $("#addfile span").html("Loaded "+Math.round(100*e.loaded/e. łącznie)+"%");
Podczas przesyłania pliku na serwer przycisk pokaże, ile % zostało już przesłanych na serwer. Po zakończeniu ładowania nazwa przycisku zostaje zwrócona w niezmienionej postaci, a wartość wejściowa pliku zostaje ustawiona na pustą, aby można było ponownie wybrać nowy plik.
Przykład części serwerowej w PHP (na prośbę Evgeniy):
$wiadomość = "";
if (empty($_FILES["upload"]["nazwa"]) || $_FILES["upload"] == "none" ( $message = "Nie wybrałeś pliku"; ) else if ($ _FILES[ "upload"]["size"] == 0 || $_FILES["upload"]["size"] > 9437184) ( $message = "Rozmiar pliku nie mieści się w normie (maksymalnie 9 MB)" ; ) else if ( ($_FILES["typ"] != "obraz/jpeg") && ($_FILES["przesłanie"]["typ"] != "obraz/pjpeg") && ( $_FILES["upload "]["type"] != "image/gif") && ($_FILES["upload"]["type"] != "image/png")) ( $message = "Tylko JPG , można przesyłać obrazy GIF i PNG."; ) else if (!is_uploaded_file($_FILES["upload"]["tmp_name"])) ( $message = "Coś poszło nie tak. Spróbuj przesłać plik ponownie." ; ) else ( $ ftype = $_FILES["upload"]["type"]; $fname = "nowa nazwa_obrazu.".($ftype == "obraz/gif" ? "gif": ($ftyp == "obraz /png" ? " png": "jpg")); if (przenieś_przesłany_plik($_FILES["upload"]["tmp_name"], $_SERVER["DOCUMENT_ROOT"].."/files/.$fname)) ( $message = "Obraz załadowany pomyślnie."; ) else ( $message = "Coś poszło nie tak. Spróbuj ponownie pobrać plik."; ) ) exit($wiadomość);
Informacje o przesłanym obrazie będą zawarte w $_FILES["upload"] , ponieważ Skrypt dodał plik w następujący sposób: form.append("upload", files);
