Vadnica JSON: Povezava JavaScript Fetch API in PHP REST zaledja

Sodobne spletne aplikacije temeljijo na asinhroni komunikaciji med brskalnikom in strežnikom, pri čemer se podatki izmenjujejo v formatu JSON brez ponovnega nalaganja strani. V tem praktičnem vodniku si bomo ogledali celoten cikel povezave: od gradnje PHP REST API zaledja (za branje in sprejemanje podatkov) do pošiljanja zahtev GET in POST prek JavaScript Fetch API-ja.

Kako deluje komunikacija med odjemalcem in strežnikom?

Izmenjava podatkov med brskalnikom in PHP zaledjem poteka skozi standardiziran štiristopenjski cikel.

1. Zahteva odjemalca (Request): JavaScript s funkcijo fetch() pošlje HTTP zahtevo (GET ali POST) na določen PHP končni naslov.
2. Obdelava na strežniku: PHP skripta prejme zahtevo, preveri vhodne podatke, izvede poizvedbe ter pripravi strukturirano polje.
3. Serializacija v JSON: PHP pretvori podatkovno polje v JSON niz s funkcijo json_encode() in ustrezno glavo Content-Type: application/json.
4. Razčlenjevanje v brskalniku: JavaScript odziv pretvori v objekt z metodo response.json() ter nemudoma posodobi DOM elemente.

Izdelava PHP API zaledja (api/naprave.php)

Spodnja PHP skripta obravnava tako poizvedbe GET za branje podatkov kot zahteve POST za sprejem novih podatkovnih struktur.

<?php
header('Content-Type: application/json; charset=utf-8');
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST');
header('Access-Control-Allow-Headers: Content-Type');

$metoda = $_SERVER['REQUEST_METHOD'];

// Simulacija podatkovne zbirke (v praksi preberemo iz MySQL baze)
$bazaNaprav = [
    ['id' => 1, 'naziv' => 'Glavna razsvetljava', 'stanje' => true, 'posodobljeno' => '2026-08-14 10:15:00'],
    ['id' => 2, 'naziv' => 'Ventilacija', 'stanje' => false, 'posodobljeno' => '2026-08-14 11:30:00']
];

// 1. OBRAVNAVA GET ZAHTEVE (Vračanje podatkov)
if ($metoda === 'GET') {
    $odziv = [
        'status' => 'uspeh',
        'skupaj' => count($bazaNaprav),
        'podatki' => $bazaNaprav
    ];
    echo json_encode($odziv, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE);
    exit;
}

// 2. OBRAVNAVA POST ZAHTEVE (Sprejem novih podatkov)
if ($metoda === 'POST') {
    $vhodniTok = file_get_contents('php://input');
    $prejetiPodatki = json_decode($vhodniTok, true);

    if (!$prejetiPodatki || !isset($prejetiPodatki['naziv'])) {
        http_response_code(400);
        echo json_encode(['status' => 'napaka', 'sporocilo' => 'Neveljavni podatki.'], JSON_UNESCAPED_UNICODE);
        exit;
    }

    $novaNaprava = [
        'id' => rand(10, 100),
        'naziv' => htmlspecialchars($prejetiPodatki['naziv']),
        'stanje' => isset($prejetiPodatki['stanje']) ? (bool)$prejetiPodatki['stanje'] : false,
        'ustvarjeno' => date('Y-m-d H:i:s')
    ];

    http_response_code(201); // 201 Created
    echo json_encode(['status' => 'uspeh', 'nova_naprava' => $novaNaprava], JSON_UNESCAPED_UNICODE);
    exit;
}

http_response_code(405);
echo json_encode(['status' => 'napaka', 'sporocilo' => 'Metoda ni dovoljena.']);
?>

Uporaba Fetch API-ja v JavaScriptu

Za asinhrono branje podatkov (GET) in pošiljanje JSON niza (POST) uporabljamo sodobno skladnjo async / await.

// 1. Branje podatkov s strežnika (GET klic)
async function pridobiNaprave() {
  try {
    const odgovor = await fetch('api/naprave.php');
    if (!odgovor.ok) {
      throw new Error(`Strežniška napaka: ${odgovor.status}`);
    }
    const rezultat = await odgovor.json();
    console.log('Prejeti podatki:', rezultat.podatki);
  } catch (napaka) {
    console.error('Napaka pri branju podatkov:', napaka);
  }
}

// 2. Pošiljanje novih podatkov na strežnik (POST klic)
async function dodajNovoNapravo(naziv, stanje) {
  try {
    const odgovor = await fetch('api/naprave.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ naziv: naziv, stanje: stanje })
    });
    const rezultat = await odgovor.json();
    if (!odgovor.ok) throw new Error(rezultat.sporocilo);
    console.log('Uspešno dodano:', rezultat);
  } catch (napaka) {
    console.error('Napaka pri shranjevanju:', napaka);
  }
}

Pregled HTTP statusov in dobra praksa

Pravilna uporaba HTTP statusnih kod zagotavlja zanesljivo komunikacijo med zaledjem in brskalnikom.

1. Branje vhodnih podatkov: Pri sprejemanju JSON POST zahtev vedno uporabite file_get_contents('php://input') namesto polja $_POST.
2. Podpora šumnikom: Pri funkciji json_encode() uporabite zastavico JSON_UNESCAPED_UNICODE, da ohranite UTF-8 znake (č, š, ž).