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

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *