@slepciuAJAX i jQuery (cz. 2)

AJAX i jQuery (cz. 2)

24.04.2012 02:21

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:

[code=php]$tytul="Kontakt"; $tresc='

Jakis tekst jakiś tekst

'; highlight_string(json_encode(array("tytul"=>$tytul,"tresc"=>$tresc)));[/code]

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

$(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=wartosc2

Parametr 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/