Cara Mengirim Data POST dengan Fetch di JavaScript

Mengirim data form ke server tanpa memuat ulang halaman dilakukan dengan request POST. Ini dasar dari fitur seperti kirim komentar atau simpan data. Artikel ini membahas cara mengirim data POST dengan Fetch di JavaScript.

Request POST dengan fetch()

<script>
fetch("https://api.contoh.com/simpan", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ nama: "Budi", umur: 25 })
})
    .then(res => res.json())
    .then(data => console.log("Sukses:", data));
</script>

Penjelasan Bagian Penting

  • method: jenis request, di sini “POST”.
  • headers: memberi tahu server isi berupa JSON.
  • body: data yang dikirim, diubah dengan JSON.stringify().

Contoh Kasus: Mengirim Data Form

<script>
document.getElementById("formku").addEventListener("submit", async function(e) {
    e.preventDefault();
    const data = { nama: this.nama.value, email: this.email.value };
    const res = await fetch("/api/daftar", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(data)
    });
    const hasil = await res.json();
    alert(hasil.pesan);
});
</script>

Kesimpulan

Untuk mengirim data POST, tentukan method, headers, dan body pada fetch(). Selalu validasi ulang data di sisi server karena request dari klien bisa dimanipulasi.

Referensi: untuk penjelasan lebih mendalam, kunjungi dokumentasi resmi JavaScript (MDN).

Baca Juga

Ali Akbar

Software Developer yang fokus mengembangkan aplikasi berbasis Web dan Desktop. Senang mempelajari teknologi baru terutama di bidang web design dan web development.

View all posts by Ali Akbar →

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *