Blog

AJAX slanje forme bez ponovnog učitavanja stranice

12. jul 2026. · 4 min čitanja

Pošaljete li HTML formu na običan način, pregledač radi ono što je oduvek radio: prelazi na novu stranicu, ili ponovo učitava trenutnu, i pritom odbacuje sve što je bilo prikazano trenutak ranije. Za formu koja živi na sopstvenoj stranici to je bezopasno. Za formu unutar modala, chat widgeta, checkout toka, ili bilo koje single-page aplikacije, potpuna navigacija je nagli reset - modal se zatvara, aplikacija se ponovo montira, pozicija skrolovanja nestaje. AJAX slanje - slanje podataka forme preko JavaScript funkcije fetch() umesto da pregledaču dozvolite da navigira - to rešava, i staje u svega par linija.

Zašto izbeći ponovno učitavanje stranice

Potpuno ponovno učitavanje stranice odbacuje sve što je JavaScript držao u memoriji: otvoren modal, trenutni korak čarobnjaka, nesačuvano stanje negde drugde na stranici. Ako forma živi unutar stabla React, Vue ili Svelte komponenti, dopuštanje pregledaču da navigira takođe ruši celu aplikaciju na strani klijenta, koju je onda potrebno ponovo učitati od nule.

Slanje preko fetch() ostavlja stranicu - i aplikaciju koja radi na njoj - netaknutom. Vi odlučujete šta se dešava dalje: prikažete poruku o uspehu inline, zatvorite modal, resetujete polja, po potrebi programski preusmerite. To je razlika između toga da pregledač odlučuje i da vi odlučujete.

To je poboljšanje, a ne obaveza

Ne morate da birate između ova dva pristupa. Ostavite atribute action i method na tagu <form> potpuno isto kao za običan POST, i presrećite submit događaj pomoću JavaScripta samo kada je dostupan. Ako se neki skript ne učita, neka ekstenzija smeta, ili je posetilac potpuno isključio JavaScript, forma i dalje radi - samo se vraća na normalnu navigaciju stranice umesto na inline poruku o statusu. To je cela ideja progresivnog poboljšanja: osnovni slučaj - HTML forma koja se šalje direktno na https://formhook.app/f/{apiKey} - uvek radi sama po sebi. JavaScript to samo čini prijatnijim kada je prisutan.

Minimalan primer

Nije potreban nijedan framework - ovo je ceo obrazac u čistom JavaScriptu. Sprečava podrazumevanu navigaciju, šalje podatke forme kao FormData, i prikazuje poruku o statusu u zavisnosti od rezultata:

const form = document.querySelector("#contact-form");
form.addEventListener("submit", async (e) => {
  e.preventDefault();
  const res = await fetch(form.action, {
    method: "POST",
    body: new FormData(form),
    headers: { Accept: "application/json" },
  });
  if (res.ok) {
    form.reset();
    document.querySelector("#form-status").textContent = "Thanks - we got it.";
  } else {
    document.querySelector("#form-status").textContent = "Something went wrong. Please try again.";
  }
});

Tražite JSON, ne redirekciju

Obratite pažnju na Accept: application/json header u primeru iznad. Bez njega, form backend koji je napravljen da posluži i obične HTML unose mogao bi pokušati da preusmeri pregledač na stranicu "hvala" - ispravno ponašanje za običan POST, ali beskorisno kada ga pozivate iz fetch(). Slanje Accept: application/json govori Formhook endpointu da zahtev dolazi iz JavaScripta, pa on vraća JSON odgovor o uspehu ili grešci umesto redirekcije, a vaš kod se onda može granati na osnovu res.ok kao u primeru. Tačan format zahteva potražite u dokumentaciji.

Ne zaboravite pristupačnost

Zamena poruke o statusu preko textContent je nevidljiva za čitač ekrana, osim ako pregledaču ne kažete da je najavi. Dodajte elementu statusa (onom koji u primeru cilja document.querySelector("#form-status")) atribut aria-live="polite", i asistivna tehnologija će pročitati ažuriranje naglas u trenutku kad se promeni - uspeh ili greška - bez toga da posetilac mora sam da ga pronađe i ponovo fokusira. To je samo jedan atribut, a čini razliku između forme koja radi za sve i one koja tiho isključuje korisnike čitača ekrana u trenutku kad JavaScript preuzme kontrolu.

Ništa od ovoga ne zahteva biblioteku ili SDK - Formhook endpoint prihvata običan POST forme sa bilo kog sajta, a fetch() verzija iznad je samo opciono progresivno poboljšanje povrh toga, ne preduslov. Kompletnu referencu zahteva i odgovora potražite u dokumentaciji, a ograničenja besplatnog paketa na stranici cena.

Radite sa frejmvorkom? Pogledajte vodič korak po korak za Next.js i Astro.

Funkcionalna forma u jednoj liniji

Hostovano u EU, unosi se čuvaju zauvek, push obaveštenja na svakom paketu.

Počnite besplatno

Bez kreditne kartice · pročitajte dokumentaciju