Bagaimana untuk menyediakan borang penyerahan javascript

JavaScript ialah bahagian penting dalam pembangunan bahagian hadapan, dan penyerahan borang ialah salah satu operasi yang paling biasa digunakan dalam pembangunan bahagian hadapan. Dalam artikel ini, kami akan memperkenalkan cara menggunakan JavaScript untuk menetapkan kaedah penyerahan borang.

1. Kaedah penyerahan borang

Dalam HTML, terdapat dua cara untuk menyerahkan borang: GET dan POST.

Kaedah penyerahan GET akan menambahkan data borang pada URL dalam bentuk rentetan pertanyaan dan menghantarnya ke pelayan. Kaedah ini sesuai untuk senario di mana hanya sejumlah kecil data perlu dihantar, seperti kotak carian.

Kaedah penyerahan POST akan menghantar data borang dalam badan permintaan HTTP, yang sesuai untuk situasi di mana data besar perlu dihantar atau kerahsiaan perlu dihantar, seperti borang log masuk.

2. JavaScript untuk menetapkan kaedah penyerahan borang

Anda boleh menggunakan JavaScript untuk menetapkan kaedah penyerahan borang secara dinamik. Contohnya, kod berikut menetapkan kaedah penyerahan borang kepada POST:

document.getElementById("myForm").method = "POST";

Dalam contoh ini, kami mula-mula menggunakan Model Objek Dokumen (DOM) untuk mendapatkan borang dengan ID "myForm", dan kemudian tetapkan atribut kaedahnya Tetapkan kepada POST.

3. Halang penyerahan borang

Apabila borang diserahkan, kita juga perlu memahami cara mengelakkan penyerahan yang tidak perlu. Anda boleh menggunakan kod berikut untuk menghalang penyerahan borang:

document.getElementById("myForm").addEventListener("submit", function(event){
    event.preventDefault();
});

Dalam contoh ini, kami menggunakan kaedah addEventListener untuk menambah pendengar acara serah pada borang. Apabila pengguna mengklik butang serah, pendengar acara menyala dan menggunakan kaedah preventDefault untuk menghalang gelagat penyerahan lalai borang.

4. Pengesahan Borang

Ia selalunya perlu untuk mengesahkan data yang dimasukkan oleh pengguna sebelum menyerahkan borang untuk memastikan kesahihan dan keselamatan data. Pengesahan borang boleh dilaksanakan melalui JavaScript.

function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("姓名不能为空");
    return false;
  }
}

Dalam contoh ini, kami menggunakan fungsi validateForm untuk mengesahkan data borang. Jika medan nama kosong, fungsi akan muncul kotak amaran dan mengembalikan palsu untuk menghalang penyerahan borang.

5. Ringkasan

JavaScript boleh digunakan dengan mudah untuk menetapkan kaedah penyerahan borang, menghalang penyerahan borang dan pengesahan borang. Teknologi ini boleh membantu pembangun mencapai pengalaman pengguna yang lebih baik sambil memastikan kesahihan dan keselamatan data borang.

Atas ialah kandungan terperinci Bagaimana untuk menyediakan borang penyerahan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!