Archiwa tagu: jQuery

jQuery i Ajax – pobieranie danych z bazy

Witaj!

Czas leci. Szybko. Za szybko. Ledwo tydzień się zaczął, a tu już czwartek… i to wieczór. Padło też pytanie – „A wpis na bloga już zrobiłeś?”. Zrobię…

Dziś o tym jak pobrać dane z bazy przy pomocy jQuery i Ajaxa.

Wygląda to wszystko niby prosto i przyjemnie. Proste i przyjemne jest na pewno przy dłuższej współpracy, ale zacząć z tym nie jest jakoś specjalnie trudno. Ajax ze zwykłym JavaScriptem przynosił wiele problemów i czytając wątki na forach widziałem jak ludzie rwali sobie włosy z głowy, że coś w jakiś sposób im ruszyło i działało – ale nie, nie chciało i już.
Przy jQuery sprawa wydaje się dużo prostsza.

Przydatny podczas całych manewrów będzie nam PHP (aktualnie już jest w wersji 7) – coś musi obsługiwać zapytania do bazy i zwracać w jakiś sposób pobrane elementy.

Ale do rzeczy. W jQuery mamy kilka metod służących do obsługi ajaxa. Należą do nich: $.get, $.post, $.ajax oraz $.ajax z zastosowaniem typu danych.
Dwie pierwsze, chociaż proste, nie dają pełnej kontroli nad połączeniem. Ustawić w nich możemy w jaki sposób będą przekazywane dane poprzez wybór metody (get, post), skrypt który będziemy wywoływali, dane jakie będziemy przekazywali do skryptu, a także jedną funkcję w której określić możemy co robimy z danymi gdy już do nas wrócą. Wystarczy jednak tylko odwołanie do samego skryptu który chcemy wykonać – pozostałe parametry są opcjonalne. Może to wyglądać na przykład tak:

$.get(
    "pobierz_pierwiastek.php",
    {
        masa_atomowa: "1"
    },
    function(data){
        alert("Pobrałem: " + data);
    }
);

// w przypadku metody POST wystarczy zamienić $.get na $.post - tyle wystarczy.

Metoda $.ajax pozwala nam już troszkę rozwinąć skrzydła. Co prawda podobnie jak dwie powyższe metody wymaga podania jedynie adresu URL do skryptu działającego po stronie serwera, ale mamy do dyspozycji jeszcze kilka innych atrybutów.

Type – wybieramy typ połączenia: POST lub GET. Jako domyślne jest GET.
Data – przekazywane dane w formie klucz: ‚warość’.
DataType – typ danych jaki oczekujemy. Może to być xml, html, script, json, jsnop, text oraz inne „oddzielone spacją zmienne”.
Zdarzenia – zdarzenia związane z połączeniem. Jest ich całe mnóstwo. Podstawowe do wykorzystania to success, complete i error. Więcej funkcji można znaleźć bezpośrednio w dokumentacji http://api.jquery.com/jQuery.ajax/

Przykładowy wygląd zapytania typu $.ajax wraz z ustawionym typem danych json:
(Jeśli chcemy użyć bez konkretnego typowania danych wystarczy usunąć linijkę z dataType i odpowiednio typować dane w PHP.

$.ajax({
    type : "POST",
    url : "pobierz_pierwiastek.php",
    dataType : 'json',
    data : {
        masa_atomowa : 1,
        nazwa_pierwiastka: 'Hel'
    },
    success: function(ret) {
        // Funkcja, która ma zostać wywołana, jeśli żądanie się powiedzie. 
        // Funkcja przeszukuje trzy argumenty: 
        // Dane zwrócone z serwera, sformatowane zgodnie z parametrem dataType; 
        // Ciąg opisujący status; 
        // Obiekt jqXHR (w jQuery 1.4.x, XMLHttpRequest).
    },
    complete: function() {
        // Funkcja, która ma być wywołana, gdy żądanie zostanie zakończone (po wykonaniu pomyślnego i wywołania zwrotnego błędu).
        // Funkcja pobiera dwa argumenty: obiekt jqXHR oraz ciąg klasyfikujący stan żądania ("sukces", "niezmodyfikowany", "błąd", "czas oczekiwania", "przerwanie" lub "Parsererror").
    },
    error: function(jqXHR, errorText, errorThrown) {
        // Funkcja, która ma zostać wywołana, jeśli żądanie nie powiedzie się. 
        // Funkcja odbiera trzy argumenty: obiekt jqXHR, ciąg opisujący typ błędu, który wystąpił i opcjonalny obiekt wyjątku, jeśli wystąpił. 
        // Możliwe wartości drugiego argumentu (oprócz null) to "timeout", "error", "abort" i "parsererror". 
        // Po wystąpieniu błędu HTTP errorThrown odbiera tekstową część stanu protokołu HTTP, na przykład "Nie znaleziono" lub "Błąd serwera wewnętrznego".
    }
});

Po wywołaniu powyższego zostaną do skryptu PHP przesłane metodą POST dwie zmienne, które będą dostępne odpowiednio jako:

$_POST['masa_atomowa']

$_POST['nazwa_pierwiastka']

Następnie aby dane zwracane zostały przesłane do skryptu w postaci json musimy je umieścić w tablicy i zwrócić poprzez:

<?php
    $masa_atomowa = (int)$_POST['masa_atomowa'];
    $nazwa_pierwiastka = (string)$_POST['nazwa_pierwiastka'];

    $data = array();
    $data['wynik_1'] = 'Moja masa atomowa to: ' + $masa_atomowa; //przykładowe działanie na zmiennej
    $data['wynik_2'] = 'Nazywam się: ' + $nazwa_pierwiastka;

    return json_encode($data);
?>

Aby wyciągnąć powyższe dane które zostaną przesłane przez serwer i coś z nimi zrobić, posłużymy się obsługą zdarzenia success.

success: function(json) {
    jQuery.each(json, function(i, val) {
        console.log(i, val);
    });
}

Tym oto sposobem, dane trafią do naszej konsoli, gdzie zostaną wyświetlone.

Na dzisiaj to tyle.

Pozdrawiam,
Romek

Co z tym jQuery…?

Coś się zmienia – i to samo, prawie że tu i teraz.

Dodałem do mojego projektu jQuery, powoli doczytuje co się skąd może brać, co w jaki sposób działa, jak się coś zmienia i podmienia – i to wręcz na żywo.
Najbardziej podoba mi się to, że to wszystko działa! Aktualnie na ten moment dynamicznie pobieram sobie z kodu HTML z pojedynczych divów  wartościowość (liczbę atomową) danego pierwiastka i wrzucam go do mojego dużego diva z podglądem.
Aby tego dokonać dodałem dla każdego diva z pierwiastkiem specjalne pole atrybutu, które zaczyna się od przedrostka „data-*” i dzięki niemu mogę wstawić tam odpowiednią wartość, którą później pobieram przy pomocy jQuery do zmiennej i podmieniam w odpowiednich miejscach. Do tego dostałem małą podpowiedź odnośnie styli CSS, aby wszystkie małe divy oskryptować jednym wpisem i dodać do niego drugi (po spacji) który będzie zawierał szczegóły dotyczące tylko tego jednego stylu (w tym wypadku koloru) – dzięki Grzegorz.

Wygląda to tak. Div z HTMLa z pojedynczym pierwiastkiem (przykład Wodoru):

<div class="cell niemetal" data-liczba-atomowa="1"><br>H<br><span class="nazwa" id="nazwa">Wodór</span></div

Duży div:

<div class="cell_big" id="big_cell">
   <div id="liczba_atomowa" class="liczba_atomowa">1</div>
   <h1>H</h1>
   <h2 id="nazwa_pierwiastka" class="nazwa_big">Wodór</h2>
   <div class="masa_atomowa"><span class="nazwa">Masa atomowa</span><br><span id="masa_atomowa">1,00794</span></div>
</div>

I wspaniałe jQuery, które jak to się mówi robi robotę… póki co tylko troszkę, ale od czegoś muszę zacząć:

$('div.cell').on({
    'mouseover' : function() {
        var $la = $(this).data('liczba-atomowa');
        $('#liczba_atomowa').html($la);
        $('#wartosciowosc').html($la);
    }
});

Uruchamia się on po najechaniu na dowolny div który jest klasy „cell” (czyli te małe prostokąty z pierwiastkami), pobiera z niego wartość jaka została przypisana polu „data-liczba-atomowa” przypisując ją do zmiennej $la i nastepnie wstawia tą zmienną jako kod HTML (można np jeszcze to wstawiać jako tekst) do znaczników o identyfikatorach odpowiednio #liczba_atomowa oraz #wartosciowosc. I ot cała filozofia – póki co, są to rzeczy proste.

Kolejnym krokiem jest przygotowanie małej bazy danych i pobieranie z niej pozostałych informacji w sposób dynamiczny tak, aby bez odświeżania strony i klikania wszystko się zmieniało wraz z ruchem kursora po tablicy pierwiastków.
Chciałbym jeszcze uporządkować ciut kod HTML i CSS, pododawać w odpowiednie miejsca identyfikatory, zmienić wszystko na jeden styl językowy (angielski/polski), żeby to miało ręce i nogi na właściwych miejscach.

Podgląd oczywiście na http://pierwiastki.romansroda.com/.

Pozdrawiam,
Romek