Quelles sont les méthodes de soumission de formulaire JS ?

Il existe plusieurs manières courantes de soumettre des formulaires JS : en utilisant la méthode submit() de l'élément de formulaire, en utilisant AJAX pour la soumission asynchrone et en utilisant l'API fetch pour la soumission asynchrone.

1. Utilisez la méthode submit() de l'élément form :
   Vous pouvez soumettre le formulaire en appelant la méthode submit() de l'élément form. Cette méthode déclenchera l'événement de soumission du formulaire et permettra au navigateur d'effectuer le comportement de soumission par défaut du formulaire.

Exemple de code :

<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. Utilisation d'AJAX pour la soumission asynchrone :
   En utilisant des technologies associées telles que XMLHttpRequest ou $.ajax() de jQuery, vous pouvez soumettre les données du formulaire au serveur via une requête asynchrone et recevoir la réponse du serveur.

Exemple de code - Utilisation de XMLHttpRequest natif :

<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. Utilisation de l'API fetch pour la soumission asynchrone :
   En utilisant l'API fetch, vous pouvez effectuer un traitement sur la demande avant de l'envoyer, et envelopper la demande et la réponse dans un objet Promise, et plus encore Effectuez efficacement des opérations asynchrones.

Exemple de code :

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

Les méthodes ci-dessus sont courantes pour la soumission de formulaires dans JS. Vous pouvez choisir la méthode appropriée pour la soumission de formulaire en fonction des besoins réels.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!