Cara Hantar Data Borang HTML dengan JavaScript fetch()

Jika awak pernah membina borang hubungi dan melihat seluruh halaman dimuat semula selepas pengguna klik "Hantar," awak sudah tahu betapa mengganggunya pengalaman tersebut. Menggunakan teknik HTML form submit fetch javascript, awak boleh menghantar data borang ke endpoint backend di latar belakang, mengekalkan pengguna di halaman yang sama, dan menunjukkan mesej kejayaan atau ralat yang bersih tanpa sebarang penyegaran halaman penuh. Tutorial ini membimbing awak melalui setiap langkah, dari menulis HTML asas hingga mengarahkan panggilan fetch() awak ke endpoint Sendform supaya penyerahan awak sampai terus ke peti masuk atau aliran kerja yang disambungkan.

Mengapa Gunakan fetch() Daripada Hantar Borang Lalai

Tingkah laku penyerahan borang lalai pelayar melakukan tepat satu perkara: ia mensiri medan borang, menghantar permintaan POST (atau GET) ke URL action, dan kemudian memuatkan apa jua respons yang dikembalikan oleh pelayan. Ini bermakna pengguna melihat kilat putih, kehilangan kedudukan skrol mereka, dan menunggu halaman baru untuk dilukis. Pada sambungan yang perlahan, ini boleh terasa rosak.

Fetch API menyelesaikan ini dengan membuat permintaan HTTP secara program, sepenuhnya dalam JavaScript, tanpa menavigasi pergi. Ini membolehkan corak hantar borang tanpa muat semula halaman yang mengekalkan pengguna terlibat dan membolehkan awak mengawal setiap aspek pengalaman pengguna, termasuk keadaan pemuatan, maklum balas pengesahan sebaris, dan banner kejayaan beranimasi.

Sebab praktikal tambahan untuk memilih fetch():

• Awak boleh melampirkan header khusus (contohnya, token CSRF atau kunci kebenaran) yang borang HTML biasa tidak boleh hantar.
• Awak boleh mensiri data sebagai JSON, FormData, atau rentetan berkod URL bergantung pada apa yang dijangkakan oleh endpoint.
• Pengendalian ralat adalah eksplisit. Awak memutuskan apa maksud "kegagalan" dan bagaimana untuk menyampaikannya.
• Ia berfungsi pada mana-mana laman statik, termasuk yang dihoskan di GitHub Pages, Netlify, atau CDN, kerana logik hidup sepenuhnya dalam pelayar.

Persediaan Borang HTML Asas

Sebelum menulis satu baris JavaScript, awak memerlukan borang HTML yang berstruktur baik. Perincian utama di sini adalah awak tidak memerlukan atribut action yang menunjuk ke mana-mana, kerana JavaScript akan mengendalikan penyerahan. Walau bagaimanapun, awak mahukan atribut name yang bermakna pada setiap input - ini menjadi kunci medan dalam payload yang diserahkan.

<form id="contact-form" novalidate>
  <div>
    <label for="name">Nama Awak</label>
    <input type="text" id="name" name="name" required placeholder="Jane Smith">
  </div>

  <div>
    <label for="email">Alamat Emel</label>
    <input type="email" id="email" name="email" required placeholder="[email protected]">
  </div>

  <div>
    <label for="message">Mesej</label>
    <textarea id="message" name="message" rows="5" required></textarea>
  </div>

  <button type="submit">Hantar Mesej</button>

  <!-- Kawasan maklum balas -->
  <div id="form-feedback" aria-live="polite"></div>
</form>

Beberapa perkara yang perlu diperhatikan dalam markup ini:

• novalidate pada elemen borang melumpuhkan gelembung pengesahan pelayar natif, memberikan awak kawalan penuh ke atas mesej ralat dalam JavaScript.
• Div id="form-feedback" dengan aria-live="polite" adalah tempat mesej kejayaan dan ralat akan muncul. Atribut ARIA memastikan pembaca skrin mengumumkan maklum balas secara automatik.
• Setiap input mempunyai id (untuk persatuan label) dan name (untuk payload borang).

Menangkap Event Submit

Langkah pertama dalam mana-mana penyerahan borang javascript adalah memintas tingkah laku lalai pelayar. Awak melakukan ini dengan mendengar event submit pada elemen borang dan segera memanggil event.preventDefault().

const form = document.getElementById('contact-form');

form.addEventListener('submit', async function (event) {
  event.preventDefault(); // Hentikan navigasi halaman lalai

  // Pengesahan asas sebelah klien
  const name = form.elements['name'].value.trim();
  const email = form.elements['email'].value.trim();
  const message = form.elements['message'].value.trim();

  if (!name || !email || !message) {
    showFeedback('Sila isi semua medan.', 'error');
    return;
  }

  // Teruskan untuk menghantar data (bahagian seterusnya)
  await submitForm({ name, email, message });
});

Dengan memisahkan logik pengesahan dari panggilan rangkaian, awak mengekalkan kod yang boleh dibaca dan mudah untuk dilanjutkan. Kata kunci async pada pengendali event membolehkan awak menggunakan await di dalamnya, yang menjadikan panggilan data borang Fetch API kelihatan segerak dan mengelakkan rantaian promise yang bersarang dalam.

Mengarahkan fetch() ke Endpoint Sendform

Di sinilah kerja sebenar berlaku. Daripada membina pelayan awak sendiri untuk menerima, menyimpan, dan memajukan penyerahan borang, awak boleh menggunakan Sendform sebagai backend awak. Selepas mencipta borang dalam dashboard Sendform, awak mendapat URL endpoint yang unik. URL itu adalah semua yang awak perlukan.

Fungsi penyerahan di bawah menggunakan FormData API untuk membina payload, yang diterima oleh Sendform secara natif:

async function submitForm(data) {
  // Gantikan URL ini dengan endpoint Sendform sebenar awak
  const SENDFORM_ENDPOINT = 'https://sendform.net/ms/YOUR_FORM_ID';

  const formData = new FormData();
  formData.append('name', data.name);
  formData.append('email', data.email);
  formData.append('message', data.message);

  try {
    const response = await fetch(SENDFORM_ENDPOINT, {
      method: 'POST',
      body: formData,
    });

    if (response.ok) {
      showFeedback('Terima kasih! Mesej awak telah dihantar.', 'success');
      form.reset();
    } else {
      const errorData = await response.json().catch(() => ({}));
      const errorMsg = errorData.message || 'Ada masalah. Sila cuba lagi.';
      showFeedback(errorMsg, 'error');
    }
  } catch (networkError) {
    showFeedback('Ralat rangkaian. Periksa sambungan awak dan cuba lagi.', 'error');
  }
}

Keputusan utama yang dibuat dalam kod ini:

• Tiada header Content-Type ditetapkan secara manual. Apabila awak menghantar objek FormData sebagai body, pelayar menetapkan sempadan multipart/form-data yang betul secara automatik.
• Pemeriksaan response.ok meliputi semua kod status HTTP 2xx, bukan hanya 200. Ini lebih kukuh daripada membandingkan response.status === 200.
• try/catch luar menangkap kegagalan peringkat rangkaian (ralat DNS, keadaan luar talian) yang response.ok tidak akan pernah lihat.

Mengendalikan Respons - Mesej Kejayaan dan Ralat

Menghantar data hanyalah separuh kerja. Pengguna memerlukan maklum balas yang segera dan jelas. Fungsi pembantu showFeedback() yang dirujuk di atas menulis mesej ke dalam div maklum balas yang awak tambahkan ke HTML:

function showFeedback(message, type) {
  const feedbackEl = document.getElementById('form-feedback');
  feedbackEl.textContent = message;
  feedbackEl.className = type === 'success' ? 'feedback-success' : 'feedback-error';
}

Ini sengaja minimal. Dalam projek sebenar awak mungkin menukar textContent untuk komponen beranimasi atau perpustakaan pemberitahuan toast, tetapi coraknya kekal sama: kemas kini DOM berdasarkan hasil panggilan fetch().

Untuk senario yang lebih maju, seperti mengalihkan ke halaman terima kasih khusus atau mencetuskan automasi hiliran selepas penyerahan, lihat artikel kami tentang cara mengautomasikan aliran kerja borang dengan webhooks, Zapier, dan APIs.

Amalan Terbaik dan Tips

Mendapatkan kod untuk berfungsi adalah satu perkara. Menghantarnya dengan cara yang bertahan dalam pengeluaran adalah perkara lain. Berikut adalah tips paling penting untuk diingati:

• Lumpuhkan butang hantar semasa permintaan. Tetapkan button.disabled = true sebelum memanggil fetch() dan aktifkan semula dalam blok finally. Ini menghalang penyerahan berganda jika pengguna mengklik beberapa kali.
• Tunjukkan keadaan pemuatan. Tukar teks butang kepada "Menghantar..." atau tambah kelas spinner semasa permintaan dalam penerbangan. Pengguna yang tidak melihat maklum balas sering menganggap tiada apa yang berlaku dan klik lagi.
• Sahkan di sebelah pelayan juga. Pengesahan sebelah klien adalah untuk pengalaman pengguna. Sendform dan mana-mana perkhidmatan backend harus menganggap semua data masuk sebagai tidak dipercayai.
• Gunakan HTTPS di mana-mana. Menghantar data borang melalui HTTP biasa mendedahkan input pengguna dalam transit. Endpoint Sendform adalah HTTPS secara lalai, tetapi pastikan halaman awak sendiri juga disajikan melalui HTTPS.
• Tambah perlindungan spam. Medan honeypot atau integrasi CAPTCHA mengurangkan penyerahan sampah dengan ketara. Untuk pandangan yang lebih mendalam tentang topik ini, lihat panduan kami tentang amalan terbaik perlindungan spam untuk borang.
• Uji laluan ralat dengan sengaja. Tukar sementara URL endpoint kepada sesuatu yang tidak sah dan pastikan mesej ralat awak muncul. Kebanyakan pembangun hanya menguji laluan gembira.
• Simpan URL endpoint daripada kawalan versi. Jika projek awak adalah sumber terbuka, simpan endpoint Sendform dalam pembolehubah persekitaran atau fail konfigurasi yang disenaraikan dalam .gitignore.

Kesimpulan

Menggantikan penyerahan borang lalai dengan panggilan fetch() adalah salah satu peningkatan berimpak tinggi yang boleh awak buat untuk mana-mana borang hubungi atau tangkap petunjuk. Hasilnya adalah pengalaman yang lebih pantas dan profesional yang mengekalkan pengguna di halaman awak dan memberikan awak kawalan penuh ke atas mesej maklum balas. Pasangkan itu dengan endpoint Sendform dan awak menghapuskan keperluan untuk sebarang kod sebelah pelayan sepenuhnya. Borang awak hidup, penyerahan awak sampai ke peti masuk awak, dan pengguna awak tidak pernah melihat pemuatan semula halaman yang mengganggukan. Cipta endpoint Sendform percuma awak hari ini dan dapatkan penyerahan pertama awak dihantar dalam beberapa minit.

Soalan Lazim