Cara menghantar borang menggunakan JavaScript

Dalam pembangunan web, borang ialah elemen biasa yang membolehkan pengguna menyerahkan data ke pelayan web. Apabila pengguna memasukkan data dalam borang dan mengklik butang hantar, borang menghantar permintaan kepada pelayan, dan pelayan memproses permintaan dan membalas dengan hasilnya. Dalam proses ini, JavaScript boleh digunakan untuk mendengar acara penyerahan borang supaya data borang boleh diproses dan disahkan tanpa memuat semula halaman. Dalam artikel ini, kami akan membincangkan cara menyerahkan borang menggunakan JavaScript.

1. Kawalan borang

Sebelum menggunakan JavaScript untuk menyerahkan borang, kita perlu memahami sedikit pengetahuan tentang kawalan borang HTML. Kawalan borang termasuk kotak input, kotak lungsur, butang radio, kotak semak, dsb. Dalam HTML, kawalan ini ditakrifkan dengan teg dan setiap teg mempunyai atribut jenis untuk menunjukkan jenisnya. Contohnya, kotak input yang digunakan untuk memasukkan teks boleh menggunakan teg Berikut ialah beberapa kawalan borang yang biasa digunakan dan jenisnya:

1 Kotak teks

2. . Kotak kata laluan

3. hobi" value="swimming">Berenang

4. Butang radio

Lelaki

5. Kotak jatuh turun

Beijing

Shanghai
Guangzhou


2. Borang Pemantauan Serah acara

Untuk memproses data borang dalam JavaScript, kita perlu mendengar acara penyerahan borang terlebih dahulu. Dalam HTML, peristiwa penyerahan borang ditakrifkan oleh teg

dan anda boleh menggunakan kaedah addEventListener() JavaScript untuk mendengarnya. Sebagai contoh, kod berikut akan mendengar acara apabila butang hantar diklik:

var btnSubmit = document.getElementById("btnSubmit");

btnSubmit.addEventListener("click", function(event) {

//Proses data borang
event.preventDefault(); //Lumpuhkan kelakuan penyerahan lalai
});

Dalam contoh ini, kita mula-mula mendapatkan elemen butang hantar melalui kaedah getElementById() , dan panggil kaedah addEventListener() untuk mendengar acara kliknya. Dalam fungsi pengendali acara, kita boleh mendapatkan data borang dan memprosesnya. Akhir sekali, untuk mengelakkan tingkah laku penyerahan lalai borang daripada berlaku, kami memanggil kaedah event.preventDefault() untuk membatalkannya.

3. Dapatkan data borang

Selepas mendengar acara penyerahan borang, kami perlu mendapatkan data borang untuk diproses. Dalam JavaScript, anda boleh menggunakan koleksi document.forms[] untuk mendapatkan elemen borang. Sebagai contoh, kod berikut akan mendapat elemen kotak input yang mewakili nama pengguna dan kata laluan:

var txtUsername = document.forms[0].username;

var txtPassword = document.forms[0].password;

Dalam contoh ini, kami menggunakan document.forms[0] untuk mendapatkan elemen borang teg dan kemudian mendapatkan elemen kotak input nama pengguna dan kata laluan melalui atribut nama.

Cara lain untuk mendapatkan data borang ialah menggunakan objek FormData. FormData ialah API baharu yang boleh digunakan untuk membina data borang dan menghantarnya ke pelayan. Sebagai contoh, kod berikut akan menggunakan objek FormData untuk menghantar maklumat pengguna:

var formData = new FormData();

formData.append("username", txtUsername.value);

formData .append(" password", txtPassword.value);

Dalam contoh ini, kita mula-mula mencipta objek FormData baharu dan kemudian menggunakan kaedah append() untuk menambah data borang pada objek FormData. Akhir sekali, hantar objek FormData kepada kaedah send() objek XMLHttpRequest untuk menghantar data borang ke pelayan.

4. Sahkan data borang

Sebelum menyerahkan borang, kami perlu mengesahkan data borang. Sebagai contoh, kita boleh menyemak sama ada nama pengguna dan kata laluan kosong:

if(txtUsername.value == "") {

alert("Sila masukkan nama pengguna");

txtUsername.focus () ;
return false; //Batalkan penyerahan
} else if(txtPassword.value == "") {
alert("Sila masukkan kata laluan anda");
txtPassword.focus() ;
return false; //Batalkan penyerahan
} jika tidak {
//Serahkan borang
kembalikan benar;
}

Dalam contoh ini, kami mula-mula menyemak sama ada nama pengguna kotak input Kosong, jika kosong, kotak gesaan akan muncul dan kursor akan dialihkan ke kotak input nama pengguna. Jika nama pengguna tidak kosong, kami terus menyemak sama ada kotak input kata laluan kosong. Jika kata laluan tidak kosong, kami membenarkan penyerahan borang.

5. Lengkapkan contoh kod JavaScript

Kini, kami telah mempelajari cara menghantar borang menggunakan JavaScript. Berikut ialah contoh kod JavaScript lengkap yang akan mendengar acara penyerahan borang, mendapatkan data borang, mengesahkan data dan menghantarnya ke pelayan:

var frmLogin = document.getElementById("frmLogin");
frmLogin.addEventListener("submit", function(event) {
var txtUsername = document.forms[0].username;
var txtPassword = document.forms[0].password;

if(txtUsername.value == "") {

alert("请输入用户名");
txtUsername.focus();
event.preventDefault();

} else if(txtPassword.value == "") {

alert("请输入密码");
txtPassword.focus();
event.preventDefault();

} else {

var formData = new FormData();
formData.append("username", txtUsername.value);
formData.append("password", txtPassword.value);

var xhr = new XMLHttpRequest();
xhr.open("POST", "login.php", true);
xhr.onload = function() {
  if(xhr.status == 200) {
    alert(xhr.responseText);
  } else {
    alert("请求失败：" + xhr.status);
  }
};
xhr.send(formData);

event.preventDefault();

}
});

Dalam contoh ini, kita mula-mula mendapatkan elemen yang mewakili borang log masuk melalui kaedah getElementById() dan panggil addEventListener () kaedah untuk mendengar acara penyerahannya. Dalam fungsi pengendalian acara, kami memperoleh elemen kotak input nama pengguna dan kata laluan dan membuat pertimbangan Jika keperluan tidak dipenuhi, kotak gesaan akan muncul dan tingkah laku penyerahan lalai borang akan dibatalkan. Jika nama pengguna atau kata laluan tidak kosong, objek FormData dibuat dan data ditambahkan padanya. Akhir sekali, gunakan objek XMLHttpRequest untuk menghantar objek FormData ke pelayan, dan paparkan hasil respons dalam kotak gesaan.

Atas ialah kandungan terperinci Cara menghantar borang menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!