REST, CRUD i wysyłanie formularzy

const OPISY = {
  200: 'OK',
  201: 'utworzono',
  204: 'brak treści',
  400: 'złe żądanie',
  401: 'wymagane logowanie',
  403: 'brak uprawnień',
  404: 'nie znaleziono',
  500: 'błąd serwera',
};

function opiszStatus(kod) {
  // najpierw dokładne dopasowanie, potem kategoria po pierwszej cyfrze
  if (OPISY[kod]) return `${kod} – ${OPISY[kod]}`;
  if (kod >= 200 && kod <= 299) return `${kod} – sukces`;
  if (kod >= 400 && kod <= 499) return `${kod} – błąd klienta`;
  if (kod >= 500 && kod <= 599) return `${kod} – błąd serwera`;
  return `${kod} – nieznany`;
}

for (const kod of [200, 201, 204, 299, 400, 404, 418, 500, 503, 42]) {
  console.log(opiszStatus(kod));
}

{
  "produkty": [
    { "id": "1", "nazwa": "Chleb", "ilosc": 1, "kupione": false },
    { "id": "2", "nazwa": "Mleko", "ilosc": 2, "kupione": true },
    { "id": "3", "nazwa": "Jabłka", "ilosc": 6, "kupione": false }
  ]
}

<!doctype html>
<html lang="pl">
<head><meta charset="utf-8"><title>Zakupy</title></head>
<body>
  <h1>Lista zakupów</h1>
  <form id="form-produkt">
    <input name="nazwa" placeholder="Produkt" required>
    <input name="ilosc" type="number" min="1" value="1" required>
    <button>Dodaj</button>
  </form>
  <ul id="lista"></ul>
  <p id="podsumowanie"></p>
  <p id="status"></p>
  <script src="app.js" defer></script>
</body>
</html>

const lista = document.getElementById('lista');
const podsumowanie = document.getElementById('podsumowanie');
const status = document.getElementById('status');
const form = document.getElementById('form-produkt');

let produkty = []; // lokalna kopia stanu – żeby „+1” znało aktualną ilość

async function zapytanie(sciezka, metoda = 'GET', dane) {
  const opcje = { method: metoda, headers: {} };
  if (dane !== undefined) {
    opcje.headers['Content-Type'] = 'application/json';
    opcje.body = JSON.stringify(dane);
  }
  const res = await fetch(sciezka, opcje);
  if (!res.ok) throw new Error(`${metoda} ${sciezka}: ${res.status}`);
  return res.status === 204 ? null : res.json();
}

function rysuj() {
  lista.innerHTML = '';
  for (const p of produkty) {
    const li = document.createElement('li');
    li.innerHTML = `
      <label>
        <input type="checkbox" data-akcja="kupione" data-id="${p.id}" ${p.kupione ? 'checked' : ''}>
        ${p.nazwa} × ${p.ilosc}
      </label>
      <button data-akcja="plus" data-id="${p.id}">+1</button>
      <button data-akcja="usun" data-id="${p.id}">Usuń</button>`;
    lista.append(li);
  }
  const kupione = produkty.filter((p) => p.kupione).length;
  podsumowanie.textContent = `Kupione: ${kupione} z ${produkty.length}`;
}

async function odswiez() {
  try {
    produkty = await zapytanie('/produkty');
    rysuj();
    status.textContent = '';
  } catch (e) {
    status.textContent = 'Błąd: ' + e.message;
  }
}

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const dane = Object.fromEntries(new FormData(form));
  try {
    await zapytanie('/produkty', 'POST', {
      nazwa: dane.nazwa,
      ilosc: Number(dane.ilosc), // FormData daje napisy!
      kupione: false,
    });
    form.reset();
    odswiez();
  } catch (err) {
    status.textContent = 'Błąd: ' + err.message;
  }
});

// jeden nasłuchiwacz na listę: zmiana checkboxa
lista.addEventListener('change', async (e) => {
  if (e.target.dataset.akcja !== 'kupione') return;
  try {
    await zapytanie(`/produkty/${e.target.dataset.id}`, 'PATCH', { kupione: e.target.checked });
    odswiez();
  } catch (err) {
    status.textContent = 'Błąd: ' + err.message;
    e.target.checked = !e.target.checked; // cofnij, skoro serwer nie zapisał
  }
});

// jeden nasłuchiwacz na listę: przyciski
lista.addEventListener('click', async (e) => {
  const { akcja, id } = e.target.dataset;
  if (!akcja || akcja === 'kupione') return;
  try {
    if (akcja === 'plus') {
      const produkt = produkty.find((p) => p.id === id);
      await zapytanie(`/produkty/${id}`, 'PATCH', { ilosc: produkt.ilosc + 1 });
    } else if (akcja === 'usun') {
      await zapytanie(`/produkty/${id}`, 'DELETE');
    }
    odswiez();
  } catch (err) {
    status.textContent = 'Błąd: ' + err.message;
  }
});

odswiez();

<?php
header('Content-Type: application/json; charset=utf-8');

$plik = __DIR__ . '/glosy.json';
$dozwolone = ['JavaScript', 'PHP', 'Python'];

// wczytaj stan (albo zera, gdy pliku jeszcze nie ma)
$glosy = file_exists($plik) ? json_decode(file_get_contents($plik), true) : [];
foreach ($dozwolone as $j) {
    $glosy[$j] = $glosy[$j] ?? 0;
}

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $dane = json_decode(file_get_contents('php://input'), true);
    $jezyk = $dane['jezyk'] ?? '';

    if (!in_array($jezyk, $dozwolone, true)) {
        http_response_code(400);
        echo json_encode(['blad' => 'Nieznany język'], JSON_UNESCAPED_UNICODE);
        exit;
    }

    $glosy[$jezyk]++;
    file_put_contents($plik, json_encode($glosy));
}

// GET oraz udany POST kończą się tak samo: aktualny stan
echo json_encode($glosy);

<!doctype html>
<html lang="pl">
<head><meta charset="utf-8"><title>Głosowanie</title></head>
<body>
  <h1>Który język wolisz?</h1>
  <p id="przyciski">
    <button data-jezyk="JavaScript">JavaScript</button>
    <button data-jezyk="PHP">PHP</button>
    <button data-jezyk="Python">Python</button>
  </p>
  <ul id="wyniki"></ul>
  <p id="status"></p>
  <script src="app.js" defer></script>
</body>
</html>

const przyciski = document.getElementById('przyciski');
const wyniki = document.getElementById('wyniki');
const status = document.getElementById('status');

function rysuj(glosy) {
  const suma = Object.values(glosy).reduce((a, b) => a + b, 0);
  wyniki.innerHTML = '';
  for (const [jezyk, liczba] of Object.entries(glosy)) {
    const procent = suma === 0 ? 0 : Math.round((liczba / suma) * 100);
    const li = document.createElement('li');
    li.textContent = `${jezyk}: ${liczba} (${procent}%)`;
    wyniki.append(li);
  }
}

async function zapytanie(opcje) {
  const res = await fetch('glosy.php', opcje);
  const dane = await res.json();                 // PHP zawsze odsyła JSON – także przy 400
  if (!res.ok) throw new Error(dane.blad ?? `status ${res.status}`);
  return dane;
}

function blokuj(stan) {
  for (const b of przyciski.querySelectorAll('button')) b.disabled = stan;
}

przyciski.addEventListener('click', async (e) => {
  const jezyk = e.target.dataset.jezyk;
  if (!jezyk) return;
  blokuj(true);
  status.textContent = 'Zapisuję głos…';
  try {
    rysuj(await zapytanie({
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ jezyk }),
    }));
    status.textContent = `Dziękujemy za głos na ${jezyk}.`;
  } catch (err) {
    status.textContent = 'Błąd: ' + err.message;
  } finally {
    blokuj(false);
  }
});

// start: pobierz aktualne wyniki
zapytanie().then(rysuj).catch((err) => (status.textContent = 'Błąd: ' + err.message));