Pobieranie danych z API w JavaScript
Blog

Timeline

Blog

Pobieranie danych z API w JavaScript

Pobieranie danych z API w JavaScript przyda ci się przy pracy jako frontend developer, web designer, bądź web developer. Przedstawię przykład jak pobrać dane z serwera w JavaScript za pomocą funkcji fetch oraz ajax. Obie działają asynchronicznie, dzięki czemu umożliwiają dynamiczne generowanie zawartości oraz bez konieczności przeładowania strony. W moim przykładzie serwerem jest xampp zainstalowany na localhoscie, a komunikacja z nim będzie odbywać się przez php. Równie dobrze możesz użyć tych dwóch funkcji do komunikacji z własnym, bądź publicznym API, dostosowując odpowiednio adres i przesyłane dane.

Struktura strony HTML

<!DOCTYPE html>
<html lang=”pl”>
<head>
    <meta charset=”UTF-8″>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>Ajax</title>
    <script defer src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js”
        integrity=”sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==”
        crossorigin=”anonymous” referrerpolicy=”no-referrer”></script>
    <script defer src=”script.js”></script>
</head>
<body>
    <input type=”number” name=”id” id=”id” placeholder=”Podaj ID użytkownika”>
    <button id=”ajax”>Pobierz dane za pomocą Ajax-a</button>
    <button id=”fetch”>Pobierz dane za pomocą fetch-a</button>
    <div id=”wynik”>
    </div>
</body>
</html>

Jest to typowa templatka strony HTML. Dodatkowo w sekcji head znajdują się dwa skrypty: jeden do biblioteki JQuery, która zawiera w sobie AJAX-a, a drugi do naszego skryptu, który obsługuje zdarzenia i pobierał dane z naszego serwera. Oba skrypty mają atrybut defer, który zapewnia, że wykonają się dopiero po załadowaniu się całego pliku HTML. W body, mamy input, który służy do podania ID użytkownika oraz dwa przyciski: jeden pobierze dane za pomocą funkcji fetch, a drugi za pomocą Ajax-a. Div wynik służy do wypisania wyniku zapytania.

Baza danych

Baza składa się z jednej tabeli użytkownicy, która przechowuje id, imię oraz nazwisko użytkowników.pobieranie danych z API w JavaScript schemat bazy

 

Pobieranie danych z API w JavaScript za pomocą funkcji fetch

Kod JavaScript

function pobranieDanychFetch() {
    const id = document.getElementById(‘id’).value
    const url = ‘apiFetch.php’
    const dane = {
        id: id
    }
    const options = {
        method: ‘POST’,
        headers: {
            ‘Content-Type’: ‘application/json’
        },
        body: JSON.stringify(dane)
    };
    fetch(url, options)
        .then(response => {
            if (!response.ok) {
                throw new Error(`Błąd sieci: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            if (data.error) {
                wypiszError(data.msg)
            }
            else {
                wypiszDane(data.dane)
            }
        })
        .catch(error => {
            console.error(‘Błąd fetch:’, error);
        });
}
document.getElementById(‘fetch’).addEventListener(‘click’, pobranieDanychFetch)
function wypiszDane(dane) {
    const div = document.getElementById(‘wynik’)
    div.innerHTML = ”
    div.innerText = `ID: ${dane.id}, Imię: ${dane.imie}, Nazwisko: ${dane.nazwisko}`
}
function wypiszError(msg) {
    const div = document.getElementById(‘wynik’)
    div.innerHTML = ”
    div.innerText = msg
}

Po kliknięciu przycisku wywołuje się funkcja pobranieDanychFetch. Funkcja pobiera wartość naszego inputa i przypisuje go do zmiennej. Następnie do zmiennych przypisujemy potrzebne wartości. Zmienna url – lokalizacja pliku/serwera(w zależności skąd pobieramy dane). Obiekt dane zawiera jedną własność id, do której przypisano pobrane id użytkownika. Obiekt options zawiera opcje zapytania, a wśród nich metodę(POST) oraz format przesyłanych danych(JSON). Następnie funkcja fetch z argumentami url i options wykona zapytanie do naszego serwera. Jeśli serwer nie odpowie to zostanie wyświetlony komunikat w konsoli, a jeśli się powiedzie to odpowiedź serwera zostanie przekonwertowana z ciągu JSON na obiekt. Po zwróceniu przez funkcję fetch odpowiedzi serwera zostanie wywołana funkcja anonimowa, która przyjmie zwrócony obiekt z funkcji fetch. Funkcja w zależności od wyniku zapytania  wyświetli wynik przez funkcje wypiszDane lub komunikat o błędzie przez funkcje wypiszError.

Więcej o funkcji fetch

Kod php

<?php
$error = false;
$msg = ”;
$wynik = [];
header(‘Content-Type: application/json’);
$jsonData = file_get_contents(‘php://input’);
$data = json_decode($jsonData);
if ($data->id) {
    $id = $data->id;
    $polaczenie = mysqli_connect(‘localhost’, ‘root’, ”, ‘baza_danych’);
    $zapytanie = “SELECT * FROM uzytkownicy WHERE id=’$id'”;
    $wynikZapytania = mysqli_query($polaczenie, $zapytanie);
    if (mysqli_num_rows($wynikZapytania) == 0) {
        $error = true;
        $msg = “Brak użytkownika o podanym ID”;
    } else {
        $wynik = mysqli_fetch_assoc($wynikZapytania);
    }
    mysqli_close($polaczenie);
} else {
    $error = true;
    $msg = “Nie podano ID”;
}
$dane = [‘error’ => $error, ‘dane’ => $wynik, ‘msg’ => $msg];
echo json_encode($dane);

Na początku deklarujemy zmienne: error – zawiera informacje czy poprawnie pobrano dane, msg – komunikat błędu oraz wynik – zawiera zwrócone przez zapytanie do bazy dane. Następnie ustawiamy format przesłanych plików na JSON i dekodujemy wysłane z kodu JavaScript dane. Sprawdzamy poprawność podanego id i nawiązujemy połączenie z bazą danych za pomocą funkcji mysqli_connect. Wykonujemy sparametryzowane zapytanie, sprawdzamy czy zwrócono dane i jeśli tak to tablicę wynik uzupełniamy asocjacyjnie wynikiem zapytania. Zamykamy połączenie, a następnie tworzymy tablice, która posłuży do zwrotu wszystkich zmiennych stworzonych na początku. Zwracamy odpowiedź za pomocą funkcji json_encode, dzięki czemu odpowiedź jest w formacie JSON.

Pobieranie danych z API w JavaScript za pomocą AJAX-a

Do skorzystania z funkcji ajax potrzebujemy podłączyć bibliotekę JQuery do naszego pliku html. Możemy to zrobić za pomocą linku cdn.
function pobranieDanychAjax() {
    const id = document.getElementById(‘id’).value;
    $.ajax({
        url: ‘apiAjax.php’,
        type: ‘POST’,
        dataType: ‘JSON’,
        data: {
            id: id
        },
        success: function (response) {
            if (!response.error) {
                wypiszDane(response.dane)
            }
            else {
                console.log(response)
                wypiszError(response.msg)
            }
        }
    })
}
document.getElementById(‘ajax’).addEventListener(‘click’, pobranieDanychAjax)
function wypiszDane(dane) {
    const div = document.getElementById(‘wynik’)
    div.innerHTML = ”
    div.innerText = `ID: ${dane.id}, Imię: ${dane.imie}, Nazwisko: ${dane.nazwisko}`
}
function wypiszError(msg) {
    const div = document.getElementById(‘wynik’)
    div.innerHTML = ”
    div.innerText = msg
}

Po kliknięciu przycisku wywołuje się funkcja pobranieDanychAjax. Funkcja pobiera wartość z pola ID i przypisuje ją do zmiennej. Następnie wywołujemy funkcje ajax i jako argument przesyłamy obiekt, który zawiera takie właściwości jak: url – adres serwera, type – metoda przesłania danych, dataType – format danych, data – obiekt zawierający dane do przesłania, success – funkcja, która zostanie wywołana po prawidłowym skomunikowaniu się z serwerem. Funkcja ta przyjmie zwrócone z serwera dane, a następnie w zależności od wyniku zapytania zostanie wyświetlony wynik przez funkcje wypiszDane lub komunikat o błędzie przez funkcje wypiszError.

Kod php

<?php
$error = false;
$msg = ”;
$wynik = [];
if (isset($_POST[‘id’]) && $_POST[‘id’]) {
    $id = $_POST[‘id’];
    $polaczenie = mysqli_connect(‘localhost’, ‘root’, ”, ‘baza_danych’);
    $zapytanie = “SELECT * FROM uzytkownicy WHERE id=’$id'”;
    $wynikZapytania = mysqli_query($polaczenie, $zapytanie);
    if (mysqli_num_rows($wynikZapytania) == 0) {
        $error = true;
        $msg = “Brak użytkownika o podanym ID”;
    } else {
        $wynik = mysqli_fetch_assoc($wynikZapytania);
    }
    mysqli_close($polaczenie);
} else {
    $error = true;
    $msg = “Nie podano ID”;
}
$dane = [‘error’ => $error, ‘dane’ => $wynik, ‘msg’ => $msg];
echo json_encode($dane);

Podobnie jak przy metodzie fetch, na początku następuje deklaracja zmiennych. Error – zawiera informacje czy poprawnie pobrano dane, msg – komunikat błędu oraz wynik – zawiera zwrócone przez zapytanie do bazy dane. Sprawdzamy poprawność podanego id i nawiązujemy połączenie z bazą danych za pomocą funkcji mysqli_connect. Wykonujemy sparametryzowane zapytanie, sprawdzamy czy zwrócono dane i jeśli tak to tablicę wynik uzupełniamy asocjacyjnie wynikiem zapytania. Zamykamy połączenie, a następnie tworzymy tablice, która posłuży do zwrotu wszystkich zmiennych stworzonych na początku. Zwracamy odpowiedź za pomocą funkcji json_encode, dzięki czemu odpowiedź jest w formacie JSON.

Której z metod używać

Obie metody są dobre i szeroko używane, natomiast fetch jest bardziej nowoczesna i staje się standardem. Ajax  jest powszechnie używany, ale powoli traci na popularności. Jeśli w swoim projekcie korzystasz z biblioteki JQuery to możesz śmiało go stosować, a w innych przypadkach polecam funkcję fetch, ponieważ nie wymaga żadnych dodatkowych bibliotek, dzięki czemu możesz jej używać bez konieczności ich dodawania do projektu.

Sprawdź naszą ofertę kursów z projektowania stron internetowych:

Sprawdź również inne artykułu z projektowania stron internetowych:

1 Komentarz
    • Waldemar Węglarz
      mar 25, 2024 at 6:22 PM / Odpowiedz

      To już nieco bardziej zaawansowane programowanie ale nie ma się co przerażać 🙂 Do ogarnięcia 🙂 aczkolwiek na początek nauki zalecane coś lżejszego czyli np. postawienie strony www na cms Joomla lub WordPress a jak ktoś lubi mniej popularne to Drupal

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *