Tidak memuat ulang halaman pada formulir kirimkan javascript

Question

Pada artikel ini, kita akan belajar cara mengirimkan formulir atau bagian dari formulir tanpa penyegaran halaman menggunakan JQuery, & akan memahami penerapannya melalui contoh

Table of Contents Show

Mengirim formulir
Jika berhasil, panggil fungsi onSuccess
Saat terjadi kesalahan, kami memanggil fungsi onError
Kode lengkap
Bagaimana cara mencegah penyegaran halaman setelah pengiriman formulir dalam JavaScript?
Bisakah Anda mengirimkan formulir tanpa memuat ulang halaman?
Bagaimana cara berhenti mengirimkan data pada penyegaran halaman?

Bagaimana cara mencegah formulir HTML untuk dikirim?

Umumnya, ketika kita mengirimkan formulir maka kita harus mengklik tombol kirim kemudian halaman kita akan menavigasi ke rute lain seperti yang disebutkan dalam atribut tindakan formulir tetapi kita dapat melakukannya di latar belakang halaman web tanpa menavigasi halaman web ke rute lain. Dan ini dimungkinkan dengan menggunakan acara tersebut. preventDefault() metode yang memblokir acara default dan tidak mengizinkannya untuk memicu. Saat kita mengklik tombol submit maka sebuah event akan terpicu, jadi kita perlu mencegah event ini karena event ini bertanggung jawab untuk membawa pengguna ke route lain. Jadi, kita harus melampirkan pendengar acara onsubmit ke formulir itu, sehingga ketika pengguna mengklik tombol kirim, kita bisa mendapatkan objek acara itu dan mencegah acara khusus itu diaktifkan, dengan menggunakan metode preventDefault. Setelah mencegah acara menggunakan acara. metode preventDefault() maka kita perlu mendapatkan nilai formulir dan membuat permintaan posting ke rute tertentu di mana kita ingin memposting nilai kita

Prasyarat. Pemahaman dasar tentang HTML, CSS, Javascript, dan JQuery diperlukan sebelum kita melanjutkan

Mendekati

Buat file HTML dan tambahkan jquery library CDN di atas kode javascript
Buat 2 kolom input, tombol kirim, dan rentang untuk menampilkan hasilnya
Tambahkan pendengar onsubmit ke formulir dan lakukan panggilan balik dengan satu parameter tunggal

Contoh. Dalam contoh ini, kami telah mengambil permintaan posting palsu di mana kami perlu memposting beberapa informasi dan server akan mengembalikan id sebagai objek

HTML

<!DOCTYPE html>_

<html>

<head>

<________9

<form action="https://private-c4cefc-codepenvf.apiary-mock.com/sendform">
  <input name="message" placeholder="Message" required>
  <button>Send</button>
</form>

_11_______

<3

<4<5

<4<7

________9

function collectData(currentForm) {
  const data = new FormData(currentForm);
  return data;
}
function setOptions(currentForm) {
  return {
    method: 'post',
    body: collectData(currentForm),
  };
}

function sendForm(currentForm) {
  return fetch(action, setOptions(currentForm));
}

_9_______9

________9

function collectData(currentForm) {
  const data = new FormData(currentForm);
  return data;
}
function setOptions(currentForm) {
  return {
    method: 'post',
    body: collectData(currentForm),
  };
}

function sendForm(currentForm) {
  return fetch(action, setOptions(currentForm));
}

_10_______1

html3

html_4

html6

________9

function collectData(currentForm) {
  const data = new FormData(currentForm);
  return data;
}
function setOptions(currentForm) {
  return {
    method: 'post',
    body: collectData(currentForm),
  };
}

function sendForm(currentForm) {
  return fetch(action, setOptions(currentForm));
}

_10_______8

html3

html_4

>3

________9

function collectData(currentForm) {
  const data = new FormData(currentForm);
  return data;
}
function setOptions(currentForm) {
  return {
    method: 'post',
    body: collectData(currentForm),
  };
}

function sendForm(currentForm) {
  return fetch(action, setOptions(currentForm));
}

_11_______5

html3

html_4

0

2

________9

function collectData(currentForm) {
  const data = new FormData(currentForm);
  return data;
}
function setOptions(currentForm) {
  return {
    method: 'post',
    body: collectData(currentForm),
  };
}

function sendForm(currentForm) {
  return fetch(action, setOptions(currentForm));
}

_12_______4

html3

8<0>

________12______8head>

<<6>

<head0>

<4________9__14_______4 head5head6head7>

________14<_11_______0

<4 8head4>

<4________9__11_______7>8>7>

8head0>

< 7>

<4________9__14_______0 head5head6head7>

head9<<8 <9head6<14 <02head6<04 <05_________14______6<_20 _______20