Terangkan cara menghantar borang menggunakan javascript

Dengan kemajuan teknologi Web yang berterusan, pembangunan tapak web Web dinamik telah menarik lebih banyak perhatian JavaScript, sebagai bahasa penskripan sisi klien, menyediakan keupayaan interaksi dan tindak balas yang baik untuk aplikasi Web. Antaranya, menghantar borang adalah salah satu fungsi JavaScript yang paling asas.

Artikel ini akan menerangkan kepada anda cara menggunakan JavaScript untuk menyerahkan borang, terutamanya dari aspek berikut:

1 Struktur dan sifat asas borang

2 . Menggunakan JavaScript Dapatkan data borang

3 Ubah suai data borang dan serahkan borang

4 Prapemprosesan dan pengesahan data borang

1

Pertama, kita perlu memahami struktur asas dan sifat bentuk. Struktur asas borang adalah seperti berikut:

<form action="xxx" method="xxx" enctype="xxx">
    表单控件
    <input type="xxx" name="xxx">
    ...
</form>

Antaranya, atribut action menunjukkan alamat URL penyerahan borang, dan atribut method menunjukkan kaedah permintaan secara amnya, GET atau POST digunakan Atribut enctype menunjukkan cara Mengekodkan data borang. Bagi kawalan borang, kita boleh membahagikannya kepada dua kategori: elemen bentuk dan medan borang.

elemen bentuk termasuk: d5fd7aea971a85678ba271703566ebfd, 221f08282418e2996498697df914ce4e, 4750256ae76b6b9d804861d8f69e79d3, bb9345e55eb71822850ff156dfde57c8, 2e1cf0710519d5598b1f0f14c36ba674, dsb.

Kumpulan medan bentuk dan kenal pasti kawalan borang, seperti yang ditunjukkan dalam kod berikut:

<fieldset>
    <legend>表单域名称</legend>
    ...
    表单控件
    <input type="xxx" name="xxx">
    ...
</fieldset>

2. Gunakan JavaScript untuk mendapatkan data borang

Mendapatkan data borang adalah kunci untuk menyerahkan Langkah-langkah borang, kita boleh mendapatkan data borang melalui kaedah berikut:

// 获取表单对象
var formObj = document.forms[0]; // 或者 document.forms["form_name"];

// 获取表单控件值
var inputObj = formObj.elements["input_name"];
var inputValue = inputObj.value;

// 获取选择框选中的值
var selectObj = formObj.elements["select_name"];
var selectValue = selectObj.options[selectObj.selectedIndex].value;

// 获取多行文本框的值
var textareaObj = formObj.elements["textarea_name"];
var textareaValue = textareaObj.value;

Antaranya, kaedah querySelector dan querySelectorAll juga boleh mendapatkan elemen dan koleksi elemen:

var inputObj = document.querySelector('[name="input_name"]');
var selectObj = document.querySelector('[name="select_name"]');
var textareaObj = document.querySelector('[name="textarea_name"]');

3 . Ubah suai data borang dan serahkan Borang

Selepas mendapatkan data borang, kami boleh mengubah suai dan memprosesnya. Contohnya:

inputObj.value = "new_value";
textareaObj.value = textareaObj.value.toUpperCase();
selectObj.options[1].selected = true;

Apabila data borang diproses, kami perlu menyerahkannya kepada pelayan. Pada masa ini, kita perlu menggunakan kaedah submit():

formObj.submit();

Jika anda perlu mengesahkan atau mengesahkan sebelum menyerahkan borang, anda boleh menggunakan acara onsubmit:

formObj.onsubmit = function () {
    // 验证表单数据是否合法
    ...
    // 如果验证失败，则返回false取消表单提交
    if (!isValid) {
        return false;
    }
    // 验证成功，提交表单
    return true;
}

4 . Prapemprosesan dan pengesahan data borang

Untuk prapemprosesan dan pengesahan data sebelum penyerahan borang, kita boleh menggunakan teknik berikut:

// 对数据进行预处理
function preProcessData(formData) {
    formData.username = formData.username.toUpperCase();
    formData.password = formData.password.toLowerCase();
    ...
}

// 对数据进行验证
function validateFormData(formData) {
    if (!formData.username) {
        alert("请填写用户名！");
        return false;
    }
    if (!formData.password) {
        alert("请填写密码！");
        return false;
    }
    ...
    return true;
}

// 表单提交事件
formObj.onsubmit = function () {
    // 获取表单数据
    var formData = {
        username: inputUsername.value,
        password: inputPassword.value,
        ...
    };
    // 预处理表单数据
    preProcessData(formData);
    // 验证表单数据是否合法
    if (!validateFormData(formData)) {
        return false;
    }
    // 提交表单
    formObj.submit();
    return true;
}

Di atas adalah proses asas penyerahan borang JavaScript. Dalam pembangunan sebenar, kami perlu melakukan pemprosesan dan pengesahan yang sepadan berdasarkan struktur dan data borang berdasarkan keperluan perniagaan tertentu untuk mencapai fungsi penyerahan borang yang lebih lengkap dan mantap.

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