Apakah kaedah untuk penyerahan borang JS?

Terdapat beberapa cara biasa untuk menyerahkan borang JS: menggunakan kaedah submit() elemen borang, menggunakan AJAX untuk penyerahan tak segerak dan menggunakan API ambil untuk penyerahan tak segerak.

1. Gunakan kaedah submit() elemen borang:
   Anda boleh menyerahkan borang dengan memanggil kaedah submit() elemen borang. Kaedah ini akan mencetuskan acara penyerahan borang dan membenarkan penyemak imbas melakukan kelakuan penyerahan lalai borang.

Contoh kod:

<form id="myForm" action="submit.php" method="POST">
  <input type="text" name="username" />
  <input type="password" name="password" />
  <input type="submit" value="提交" />
</form>

<script>
  const form = document.querySelector('#myForm');
  form.addEventListener('submit', (e) => {
    e.preventDefault(); // 阻止表单的默认提交行为
    // 进行表单验证
    // ...
    // 提交表单
    form.submit();
  });
</script>

2. Menggunakan AJAX untuk penyerahan tak segerak:
   Dengan menggunakan teknologi berkaitan seperti XMLHttpRequest atau jQuery's $.ajax(), anda boleh menyerahkan data borang ke pelayan melalui permintaan pelayan tak segerak.

Contoh Kod - Menggunakan XMLHttpRequest asli:

<form id="myForm" action="submit.php" method="POST">
  <input type="text" name="username" />
  <input type="password" name="password" />
  <input type="submit" value="提交" />
</form>

<script>
  const form = document.querySelector('#myForm');
  form.addEventListener('submit', (e) => {
    e.preventDefault(); // 阻止表单的默认提交行为
    // 进行表单验证
    // ...
    // 构造请求对象
    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'submit.php', true);
    // 设置请求头
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    // 监听请求状态
    xhr.onreadystatechange = function() {
      if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
        console.log(xhr.responseText);
      }
    };
    // 发送请求
    xhr.send(new FormData(form));
  });
</script>

3. Menggunakan fetch API untuk penyerahan tak segerak:
   Dengan menggunakan fetch API, anda boleh melakukan beberapa pemprosesan pada permintaan sebelum menghantarnya, dan membungkus permintaan dan respons menjadi objek Promise, dan banyak lagi Laksanakan operasi tak segerak dengan cekap.

Contoh kod:

<form id="myForm" action="submit.php" method="POST">
  <input type="text" name="username" />
  <input type="password" name="password" />
  <input type="submit" value="提交" />
</form>

<script>
  const form = document.querySelector('#myForm');
  form.addEventListener('submit', (e) => {
    e.preventDefault(); // 阻止表单的默认提交行为
    // 进行表单验证
    // ...
    // 构造请求参数对象
    const formData = new FormData(form);
    // 发起fetch请求
    fetch('submit.php', {
      method: 'POST',
      body: formData
    })
    .then(response => response.text())
    .then(data => console.log(data))
    .catch(error => console.log(error));
  });
</script>

Di atas adalah kaedah penyerahan borang yang biasa di JS Anda boleh memilih kaedah yang sesuai untuk penghantaran borang mengikut keperluan sebenar.

Atas ialah kandungan terperinci Apakah kaedah untuk penyerahan borang JS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!