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 d5fd7aea971a85678ba271703566ebfd dan setiap teg mempunyai atribut jenis untuk menunjukkan jenisnya. Contohnya, kotak input yang digunakan untuk memasukkan teks boleh menggunakan teg e7ed14d9bdc7a2b8e76e037c915be2fc Berikut ialah beberapa kawalan borang yang biasa digunakan dan jenisnya:

1 Kotak teks

b97cf5df8b28e4a76caaaadaf8e76d05

2. . Kotak kata laluan

941744aa44fdd721c0b67eb5ad94b319

3. hobi" value="swimming">Berenang

4. Butang radio

9a39106cbe8abbcc2b7ec47a3e0dd09bLelaki

5. Kotak jatuh turun

b24edf5d0904049f209b779223675bec

b0ab430e878b56bd8082d4bb7d758599Beijing4afa15d3069109ac30911f04c56f3338

6e89befd3b234ad5383d09267b9063c8Shanghai4afa15d3069109ac30911f04c56f3338
df9b1a06c7c7872194b28a87d3374989Guangzhou4afa15d3069109ac30911f04c56f3338
18bb6ffaf0152bbe49cd8a3620346341

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 ff9c23ada1bcecdd1a0fb5d5a0f18437 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 ff9c23ada1bcecdd1a0fb5d5a0f18437 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!