Cara menghantar borang dalam JavaScript

Dalam pembangunan web, borang ialah kaedah interaksi yang kerap digunakan Pengguna boleh memasukkan data yang berkaitan melalui borang dan menyerahkannya kepada pelayan untuk diproses. Dalam JavaScript, bagaimana untuk menyerahkan borang?

1. Kaedah penyerahan asas

Cara paling asas untuk menyerahkan borang ialah menghantar data borang ke pelayan untuk diproses melalui kaedah submit() elemen borang . Contoh kod adalah seperti berikut:

document.getElementById("myForm").submit();

di mana, myForm ialah id borang.

Kaedah ini secara amnya sesuai untuk borang mudah, seperti log masuk, pendaftaran, dsb., dan tidak memerlukan banyak pemprosesan.

2. Kaedah penyerahan Ajax

Jika anda perlu melakukan operasi tambahan semasa menyerahkan borang, seperti pengesahan data, permintaan tak segerak, dsb., anda perlu menggunakan Ajax kaedah penyerahan. Ini boleh dicapai menggunakan XMLHttpRequest atau kaedah ajax jQuery. Contoh kod adalah seperti berikut:

// 使用XMLHttpRequest
var xhr = new XMLHttpRequest();
var formData = new FormData(document.getElementById("myForm"));
xhr.open("POST", "http://example.com/submitForm", true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
}
xhr.send(formData);

// 使用jQuery
$.ajax({
    type: "POST",
    url: "http://example.com/submitForm",
    data: $('#myForm').serialize(),
    success: function(response) {
        console.log(response);
    }
});

Antaranya, objek FormData digunakan untuk mendapatkan data dalam borang, dan kaedah serialize() digunakan untuk mensiri data borang.

3. Kaedah penyerahan JavaScript

Walaupun elemen borang mempunyai kaedah submit(), JavaScript juga boleh mensimulasikan penyerahan borang. Anda boleh mencipta elemen borang tersembunyi, menetapkan sifat yang berkaitan dan menyerahkannya menggunakan kaedah submit() JavaScript. Contoh kod adalah seperti berikut:

var form = document.createElement("form");
form.action = "http://example.com/submitForm";
form.method = "POST";

var input = document.createElement("input");
input.type = "text";
input.name = "username";
input.value = "John";

form.appendChild(input);
document.body.appendChild(form);

form.submit();

Kaedah ini lebih sesuai untuk senario di mana borang dicipta secara dinamik atau masa penyerahan borang perlu dikawal.

4. Kaedah penyerahan acara mengikat

Jika anda perlu mencetuskan acara apabila pengguna mengklik butang hantar sebelum menyerahkan borang, anda boleh menggunakan kaedah acara mengikat untuk mencapai ia. Contoh kod adalah seperti berikut:

var submitBtn = document.getElementById("submitBtn");
submitBtn.addEventListener("click", function() {
    // TODO: 其他逻辑处理
    document.getElementById("myForm").submit();
});

Antaranya submitBtn ialah id butang submit.

Ringkasan:

Di atas ialah empat cara untuk menyerahkan borang dalam JavaScript, setiap kaedah mempunyai senario terpakai sendiri. Tetapi tidak kira kaedah yang anda gunakan, anda perlu memberi perhatian kepada keselamatan data borang untuk mengelakkan data daripada diganggu atau bocor.

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