Strona używa cookies (ciasteczek). Dowiedz się więcej o celu ich używania i zmianach ustawień. Korzystając ze strony wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki.    X

AJAX i jQuery (cz. 2)

Witam w drugiej części wpisu o AJAX'ie i jQuery. Jeśli ktoś jeszcze nie miał okazji zapraszam do lektury części 1. Tym razem, tak jak obiecałem, prześlemy dane w obie strony. Zrobimy to na przykładzie formularza kontaktowego. Po wypełnieniu go przez użytkownika, wyślemy zawartość na serwer, sprawdzimy tam, czy pola zostały poprawnie wypełnione i jeśli tak wyślemy maila, a do przeglądarki odpowiedź o tym czy udało się wysłać maila, czy nie. Jeśli mail zostanie wysłany wyczyścimy formularz. Wszystko to zrobimy bez przeładowywania strony.

W związku z tym, że mamy do wykonania jakieś operacje po stronie serwera wykorzystamy w przykładnie PHP.

Na początek formatowanie

Tą część oprzemy na plikach stworzonych w poprzedniej części. Mamy już strony wgrywane za pomocą AJAX'a. Treść stron i ich tytuły przechowywane i przesyłane są w postaci JSON. Strona, któą za chwilę będziemy edytować musi być ostatecznie przesłana również w takiej postaci. Zakodowanie bardziej skomplikowanej treści ręcznie do formatu JSON jest mało wygodne i czasochłonne. Na szczęście w PHP istnieje funkcja, która może zrobić to za nas json_encode(). Dla zainteresowanych podlinkowałem ją do manuala. Krótki przykład użycia:$tytul="Kontakt"; $tresc='<p class="jakaś klasa">Jakis tekst<br />jakiś tekst</p>'; highlight_string(json_encode(array("tytul"=>$tytul,"tresc"=>$tresc)));Tak zakodowany tekst wyświetli w przeglądarce:{"tytul":"Kontakt","tresc":"<p class=\"jaka\u015b klasa\">Jakis tekst<br \/>jaki\u015b tekst<\/p>"}Możemy ten tekst skopiować i wkleić do konkretnego pliku HTML, lub (i to rozwiązanie polecam) zamiast highlight_string użyć echo i wykorzystać ten kod bezpośrednio w wywoływanym pliku (tylko wówczas musi to być plik php).

Do dzieła

Zaczynamy od pliku "ajax/kontakt.html". Stwórzmy w nim prosty formularz kontaktowy (dodajemy, też kilka styli dla formularza):<style> label{display: block;font-weight: bold;} input[type="text"],textarea{width: 300px;display: block;} #info{display: none; width: 300px; padding: 10px; margin: 10px auto; border-style: solid; border-width: 2px;} .error{border-color: red; background: #FF8080;} .ok{border-color: #004000; background: #7CD196;} </style> <div id="info"></div> <form action="mail.php" method="post" id="form"> <label>Imię i nazwisko:</label> <input type="text" value="" name="nazwisko" /> <label>Twój adres email:</label> <input type="text" value="" name="mail" /> <label>Tresc wiadomości:</label> <textarea name="wiadomosc" rows="10"></textarea> <input type="submit" value="Wyślij"/> </form>Myślę, że kodu samego formularza nie muszę wyjaśniać. Dwa słowa natomiast o div'ie z id równym "info". Ten element domyślnie jest ukryty,a będzie służył do wyświetlania informacji o tym jak przebiegło wysłanie formularza. Będziemy wstawiać do niego treść za pomocą jQuery i dodatkowo będziemy dodawać do niego klasę "ok" lub "error", w zależności od wyniku. Po zmianie na JSON (pamiętajcie o tytule strony), możemy kliknąc w link "Kontakt" na naszej stronie i powinniśmy zobaczyć coś mniej więcej takiego:

Wysyłamy i odbieramy w tle

Teraz na sam początek strony dodajemy kod JS (pamiętamy o znacznikach <script>), który przy wykorzystaniu omawianej w poprzedniej części kursu, metody ajax() wyśle, odbierze i przetworzy dane:$(function(){ $("#form").submit(function(e){ var loader=$("#loader"); var info=$("#info"); var form=$(this); $.ajax({ url: "ajax/mail.php", dataType: "JSON", type: "post", data:form.serialize(), beforeSend: function(){ info.hide(); loader.show(); }, success: function(obj){ if (obj.type=="ok") { info.addClass("ok").removeClass("error").html(obj.text); form.get(0).reset(); } else { info.addClass("error").removeClass("ok").html(obj.text); } }, error : function(){ info.addClass("error").removeClass("ok").html("Przepraszamy, ale wystąpił błąd podczas wysyłania informacji.") }, complete: function(){ loader.hide(); info.show(); } }); e.preventDefault(); }) })

Fragment kodu $("#form").submit(function(e){...}) powoduje przechwycenie próby wysłania formularza przez użytkownika (niezależnie czy za pomocą kliknięcia w klawisz Wyślij czy przez kliknięcie Enter).
Tworzymy trzy zmienne przechowujące obiekty jQuery odnoszące się do elementów na naszej stronie:

  • loader - utworzony w 1 części div wyświetlający się w czasie ładowania treści
  • info - div, który będzie wyświetlał info o efekcie wysyłania
  • form - formularz
Dlaczego tworzymy zmienne, a nie odwołujemy się do tych elementów w kodzie? Dlatego, że za każdym razem kiedy używamy $(), jQuery przeszukuje drzewo DOM w poszukiwaniu naszego elementu,a jak zapiszemy obiekt do zmiennej, robi to tylko raz (a przy okazji kod staje się czytelniejszy).

Dalej wywołujemy znaną juz nam metodę $.ajax(). Nowe parametry na początku to: type i data. Parametr data przyjmuje dane do wysłania na serwer w postaci: parametr1=wartosc1&parametr2=wartosc2Parametr type mówi o tym w jaką metodą zostaną przesłane dane - w naszym przypadku wybieramy metodę POST (domyślnie używana jest GET).
Dane z formularza moglibyśmy wpisać w następujący sposób:var nazwisko=$("#form :text[name=nazwisko]").val(); var mail=$("#form :text[name=mail]").val(); var wiadomosc=$("#form textarea[name=wiadomosc]").val() $.ajax({ ... data:"nazwisko="+nazwisko+"&mail="+mail+"&wiadomosc="+wiadomosc, ... }); Ja używam w zamain za to metody serialize() dostępnej w jQuery, która przypięta do formularza robi za nas całą tą robotę.
Całość wysyłamy na adres ajax/mail.php. Zobaczmy co się tam dzieje.

Po stronie serwera

Ponieważ, nie jest to kurs PHP nie będę się szczególnie skupiał na tym co się dzieje po stronie serwera. Objaśniam tylko krótko w komentarzach co się dzieje. Najważniejsze dla nas, że po stronie przeglądarki oczekujemy odpowiedzi w postaci obiektu JSON, zawierającego dwa pola:
  • type - tekst "ok" lub "error" oznaczający czy wysłano maila czy nie
  • text - informacja do wyświetlenia w polu info
//tworzymy tablice do przechowywania błędów $bledy=array(); //inicjujemy domyślne typ i treść komunikatu $komunikat="Mail został wysłany"; $type="ok"; //sprawdzamy czy wypełniono pole nazwisko i jeśli nie dodajemy do tablicy błąd if (empty($_POST['nazwisko'])) $bledy[]="Proszę podać nazwisko."; //sprawdzamy poprawność maila i ewentualnie dodajemy bład $wyr = "!^[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)*@([a-zA-Z0-9_-]+)(\.[a-zA-Z0-9_-]+)*(\.[a-zA-Z]{2,4})$!i"; if (!preg_match($wyr, $_POST['mail'] )) $bledy[]="Proszę podać poprawny adres mail"; //jak wyżej sprawdzamy czy pole nie jest puste if (empty($_POST['wiadomosc'])) $bledy[]="Proszę wpisać wiadomość."; //sprawdzamy czy są jakieś błędy if ($bledy) { //jeśli błędy są, zmieniamy typ wiadomości i ustalamy jej nową treść $type="error"; $komunikat="Wystąpiły następujące błędy: <ul>"; foreach ($bledy as $b) $komunikat.="<li>".$b."</li>"; $komunikat."</ul>"; } else { //jeśli nie ma błędów próbujemy wysłać maila $temat= "=?UTF-8?B?".base64_encode("Wiadomość ze strony internetowej od ".$_POST['nazwisko'])."?="; $naglowki = "Reply-to:".$_POST['mail'].PHP_EOL; $naglowki .= "From: ".$_POST['mail'].PHP_EOL; $naglowki .= "MIME-Version: 1.0".PHP_EOL; $naglowki .= "Content-type: text/html; charset=iso-8859-2".PHP_EOL; if(!mail('twoj@mail.pl', $temat, $_POST['wiadomosc'], $naglowki)) { //jeśli wystąpił błąd podczas wysyłania maila zmieniamy odpowiednio typ i treść wiadomości $komunikat="Wystąpił błąd podczas wysyłania wiadomości"; $type="error"; } } //wyświetlamy odpowiednią wiadomość w postaci obiektu JSON $odp=array("type"=>$type,"text"=>$komunikat); echo json_encode($odp);Oczywiście po stronie serwera z danymi może się dziać cokolwiek innego, np mogą być zapisywane do bazy danych.

Znowu w przeglądarce

Wracamy do kodu JS, który ma następujące zadania:

beforeSend

Przed wysłaniem zapytania do serwera ukrywamy element z informacją o stanie wysłania formularza (na wypadek, gdyby to była ponowna próba wysłania formularza, a poprzednia spowodowała wyświetlenie komunikatu) oraz pokazujemy info o ładowaniu treści (jak przy ładowaniu stron)

success

W przypadku poprawnego wysłania treści i otrzymania odpowiedzi sprawdzamy zawartość pola typ w otrzymanym obiekcie. Jeśli typ jest równy "ok", wówczas dodajemy do pola "info" klasę "ok" (za pomocą metody addClass) oraz usuwamy (gdyby wcześniej została nadana) klasę "error" (za pomocą metody removeClass). Na koniec wpisujemy do diva treść zwróconą w obiekcie JSON w polu "text". Na koniec z obiektu form pobieramy element drzewa DOM, który zawiera formularz (get(0)) i używamy metody "javascript'owej" reset(), to zresetowania wartości w formularzu do domyślnych
Jeśli typ jest równy "error" robimy podobne rzeczy, z tym, że usuwamy klasę "ok", a dodajemy "error" i nie resetujemy formularza.

error

Jeśli z jakiegoś powodu nie uda się wysłać lub otrzymać danych, wówczas postępujemy podobnie jak w przypadku błędów w wysłaniu formularza, tylko ręcznie wpisujemy komunikat błędu

complete

Ta część kodu wykonuje się niezależnie od tego, czy udało się wysłać i pobrać dane, czy tez wystąpiły jakieś błędy. Tutaj ukrywamy informację o ładowaniu danych. I na koniec pokazujemy informację o tym czy udało się wysłać maila, czy są jakieś błędy - musimy to zrobić, bo mimo nadania naszemu div'owi nowej klasy i wpisaniu w niego treści, on nadal pozostaje ukryty.

Na koniec wywołujemy e.preventDefault();, które zapobiega przeładowaniu strony (wykonaniu domyślnej operacji dla zdarzenia submit).

To w zasadzie tyle. Teraz cały kod strony (JS,CSS,HTML) kodujemy do JSON i gotowe. Strona działa:

Uwagi na koniec

Przykład w założeniu ma pokazywać działanie z wykorzystaniem AJAX'a, wiec pomija kilka innych kwestii, jak chociażby bezpieczeństwo (np należało by sprawdzić czy w adresie mail nie ma znaków końca linii, bo to umożliwia dodanie do maila nagłówków przez wysyłającego.)
Można by też pierwsze sprawdzenie poprawności danych zrobić po stronie klienta w JS. No i kilka innych rzeczy.

Musicie też pamiętać, że żeby wykonać to ćwiczenie lokalnie musicie mieć zainstalowane PHP, serwer HTTP i jakiś serwer SMTP - może się okazać, że prościej wykonać ćwiczenie na hostingu, albo zamiast funkcji mail() użyć zapisu do pliku lub bazy.

Link do działającego przykładu

Przykład oczywiście nie wysyła na prawdę maili, tylko symuluje udaną wysyłkę:http://przyklady.blog.abryser.pl/jquery2/ 

internet programowanie

Komentarze

0 nowych
underface   14 #1 24.04.2012 00:29

A jak takie wczytywane strony mają się do seo?

  #2 24.04.2012 08:21

@underface:
W wypadku formularza to nie ma znaczenia, ale wczytywanie np. podstron jako takich wyłącznie po ajaxie w zasadzie rozwala nam calutkie seo. Linki powinny być poprawne i kierować do działających stron. JS dopiero tworzy na to "nakładkę" i zmienia efekt kliknięcia (powstrzymuje przed przejściem do innej strony i zajmuje się tym czym ma).
Po prostu nie powinno się zwalać wszystkiego na js, strona i bez niego powinna działa poprawnie. Dopiero wtedy podstrony mogą być normalnie indeksowane.

A co mi tam, zalinkuję do czegoś, co robilem w sposób o którym piszę:
http://tracona.jagged-alliance.pl/

Jeżeli masz obsługę js, działa wszystko po ajaxie. Jeżeli nie masz, działa, ale "na sztywno".
BTW. Pozdrowienia dla Jaahquubela :)

djfoxer   17 #3 24.04.2012 08:29

Jeśli chodzi o wysyłanie formularzy, to najlepiej użyć jQuery Form Plugin http://jquery.malsup.com/form/ , szybko i prosto.

slepciu   10 #4 24.04.2012 10:15

@djfoxer - pluginu sam używam i polecam, ale w przykładzie chciałem pokazać jak wysyłać dane przy pomocy metody $.ajax().

underface   14 #5 24.04.2012 10:18

a ta metoda wysyłania za pomocą ajax'a to czasem nie była jakiś czas temu opisywana jako dość niebezpieczna?
być może się mylę albo źle zapamiętałem tego typu informację

slepciu   10 #6 24.04.2012 11:01

@underface - wg mnie wysyłanie informacji AJAX'em jest tak samo (nie)bezpieczne jak wysyłanie informacji w zwykły sposób. W obu przypadkach można przesłać inne informacje, niż byśmy się spodziewali. Dlatego skrypt po stronie serwera powinien sprawdzać i oczyszczać dane (szczególnie jeśli są one zapisywane w bazie danych). Natomiast tak jak napisałem pod koniec artykułu nie uwzględniłem tych kwestii w skrypcie, bo nie chciałem komplikować, a poza tym nie to było tematem artykułu.

  #7 24.04.2012 11:21

W zasadzie w obu przypadkach, czy to po ajaxie czy bez niego, warto byłoby dorzucić do formularza jakąś wartość jasno określającą, że został on wysłany z tej a nie innej strony. Jakiś ciąg z md5 czy sha jako dodatkowe pole ukryte, najpierw to sprawdzać, a dopiero potem przeprowadzać walidację samych danych z formularza.

kubut   17 #8 24.04.2012 11:40

Że też nie mogłeś napisać tego 2 dni temu, jak męczyłem się z formularzem ajaxowym :P Miałbym mniej szukania w google :)

slepciu   10 #9 24.04.2012 12:29

@lukasamd - wystarczy po stronie php sprawdzić tablicę $_SERVER, tam są informację o adresie hosta, który wysłał żądanie. Wysyłanie dodatkowego pola ukrytego w zasadzie nie podnosi w żaden sposób bezpieczeństwa skryptu. Jeśli, ktoś jest na tyle sprytny, że będzie próbował podszyć się pod formularz, to sprawdzi jakie pola ukryte są wysyłane i też je wyśle.

  #10 24.04.2012 13:02

@slepciu:
Nie wszystkim danym z $_SERVER można ufać.
Poza tym ja mam na myśli wprowadzenie pola unikalnego dla każdego użytkownika, bo to wyklucza atak CSRF na taki formularz.

slepciu   10 #11 24.04.2012 13:15

@lukasamd - no ale pola unikalne, dla każdego użytkownika możesz wprowadzić tylko jeśli użytkownicy wcześniej się logują, w zwykłym formularzu kontaktowym na stronie nie ma takiej możliwości. Zresztą w przypadku formularza kontaktowego sam atak CSRF nie ma zastosowania. No i generalnie w przypadku formularza tutaj opisanego chyba jedyne realne zagrożenie to dołączenie do maila jakiś nagłówków, których nie planowaliśmy. Bo ostatecznie jedynym zadaniem tego skryptu jest wysłanie maila. W przypadku stron wymagających logowania oczywiście zgodzę się, że potrzebne są dodatkowe zabezpieczenia

alucosoftware   7 #12 24.04.2012 13:53

W IE9 masz błąd... Obiekt loader pojawia się wraz z formularzem i zakrywa go skutecznie :)

Poradzisz sobie, to błahostka...

Gratuluję ciekawego wpisu

slepciu   10 #13 24.04.2012 14:21

@alucosoftware - dzięki za zwrócenie uwagi. Problemem był komentarz HTML wewnątrz znacznika

slepciu   10 #14 24.04.2012 14:22

Kurde, w poprzednim komentarzu usunęło mi nazwę znacznika: script

arlid   14 #15 24.04.2012 15:41

@slepciu:
Dzięki za wpis. Bardzo ciekawy. Znów mogłem się czegoś nowego nauczyć :)

slepciu   10 #16 24.04.2012 16:08

@arlid - do usług :)

Zopsesen   4 #17 25.04.2012 06:39

@slepciu

Zabezpieczenie przeciw atakom csrf w formularzu kontaktowym bez logowania tez ma sens.
Zwieksza szanse na to, ze to wlasnie uzytkownik z tej sesji i tego adresu ip wyslal wiadomosc. Wystarczy dolaczyc w ajaxie 1 pole z tokenem, odczytywane chociazby z hiddena obecnego w formularzu.

slepciu   10 #18 25.04.2012 09:33

@Zopsesen - może ja znam złą definicję, ale z założenia atak CSRF polega na zmuszeniu użytkownika do wykonania jakieś operacji, do wykonania której są potrzebne jego uprawnienia na strony. Tutaj wg mnie mówienie o tego typu ataku jest w zasadzie nie może mieć miejsca. Ale mniejsza o nazwę. Wracając do meritum dyskusji. Wydaje mi się, że w przypadku formularza o tak banalnej funkcjonalności, tworzenie jakiś dodatkowy zabezpieczeń (poza ewentualnie CAPTCHA) jest trochę jak strzelanie do muchy z armaty, bo jakie płyną zagrożenia, skoro przed wykorzystaniem danych sprawdzam ich poprawność?

fotopano   1 #19 25.04.2012 12:27

Większość frameworków php posiada wsparcie do ajax/json, więc nie wiem po co to wszystko:)
Przecież nie będziemy za każdym razem pisać własnej walidacji, obsługi błędów itd.
Poza tym dużo łatwiej jest skorzystać z $.post w jQuery.
A jak ktoś ma mały projekt to można go oprzeć na jakimś małym i lekkim frameworku np. DooPHP, albo Yii.

slepciu   10 #20 25.04.2012 12:50

@fotopano -
1. Nie rozumiem takiej krytyki, jasne że są farmeworki, ale czy to oznacza, że nie powinniśmy się już uczyć innych dróg? A kto stworzy frameworki?
2. Zresztą tak naprawdę w tym wpisie PHP jest tylko jako dodatek, który można zastąpić czymkolwiek po stronie serwera (np frameworkiem)
3. Fakt $.post() jest prostsze w użyciu, ale jak pisałem w pierwszej części wewnętrzne i tak jest odwzorowywane na $.ajax(), a daje nam mniej możliwości. Nie można ustalić postępowania w przypadku błędu (error), ani podjąć działań przed rozpoczęciem przesyłania danych (beforeSend), czy po wykonaniu wszystkiego (complete). Można oczywiście te działania ustalić globalnie dla wszystkich wywołań ajax'owych, ale w tym przykładzie by się nie sprawdziło - bo inne rzeczy się dzieją przy ładowaniu stron, a inne przy wysyłaniu formularza.

alucosoftware   7 #21 25.04.2012 13:49

@slepciu

Popieram, artykuł prezentuje podstawowe wiadomości, które są niezbędne dla zrozumienia idei ajax. Frameworki powinno się wykorzystywać w bardziej skomplikowanych rozwiązaniach i są całkowicie zbędne w przypadku zastosowań "domowych" jak i podczas nauki html+js+php.

Zanim zaczniemy pisać - poznajmy litery alfabetu.

Ardziej   5 #22 26.04.2012 19:13

@underface, co do SEO to w przypadku kiedy odwiedza nas bot G to traktuje menu normalnie, zwykły href i tyle.
Ja nie zauważyłem żadnych problemów z SEO :)
A JSON to jak dla mnie czysta poezja, bez problemów z UTF-8.
Kodzik przyjemny dla oka :)

Świetny wpis

slepciu   10 #23 27.04.2012 11:51

@Ardziej - dzięki

  #24 23.06.2012 10:38

Bardzo fajne lekcje właśnie tego szukałem

slepciu   10 #25 25.06.2012 16:55

@AdrianP (niezalogowany) - dzięki

  #26 17.11.2013 19:18

A jest możliwość wysłania maila jeśli plik php ($.ajax({url:"ajax/mail.php") znajduje się na na innym zewnętrznym serwerze?

slepciu   10 #27 19.11.2013 14:29

@marcinp1984p (niezalogowany) - nie powinno być problemu

  #28 14.01.2014 01:23

no no fajne ;D

slepciu   10 #29 21.01.2014 23:55

@fajne (niezalogowany) - dzięki :)