Quelles sont les différentes méthodes de soumission de formulaire js ?

Quels sont les moyens de soumettre des formulaires JS ?

Dans le développement front-end, les formulaires sont l'une des formes importantes d'interaction de données entre les utilisateurs et les pages Web. JavaScript, en tant que langage de script puissant, nous permet de soumettre des données de formulaire de différentes manières. Ce qui suit présentera plusieurs méthodes courantes de soumission de formulaires JS et fournira des exemples de code spécifiques.

1. Soumettez le formulaire en utilisant la méthode submit() de l'élément de formulaire :

   Il s'agit de la méthode la plus basique, appelant directement la méthode submit() de l'élément de formulaire pour soumettre le formulaire. L'exemple de code est le suivant :

   <form id="myForm" action="submit.php" method="post">
     <input type="text" name="username" />
     <input type="password" name="password" />
     <button type="button" onclick="submitForm()">提交</button>
   </form>
   
   <script>
     function submitForm() {
       document.getElementById("myForm").submit();
     }
   </script>

   Copier après la connexion

   Dans le code ci-dessus, lorsque l'on clique sur le bouton de soumission, la fonction submitForm() est appelée pour soumettre les données du formulaire à la page submit.php.

2. Utilisez l'objet XMLHttpRequest pour soumettre un formulaire :

   L'objet XMLHttpRequest est une technologie utilisée pour l'interaction des données avec le serveur en arrière-plan. Envoyez les données du formulaire au serveur en créant un objet XMLHttpRequest. L'exemple de code est le suivant :

   <form id="myForm">
     <input type="text" name="username" />
     <input type="password" name="password" />
     <button type="button" onclick="submitForm()">提交</button>
   </form>
   
   <script>
     function submitForm() {
       var xhr = new XMLHttpRequest();
       var formData = new FormData(document.getElementById("myForm"));
   
       xhr.open("POST", "submit.php", true);
       xhr.onreadystatechange = function() {
         if (xhr.readyState === 4 && xhr.status === 200) {
           console.log(xhr.responseText);
         }
       };
       xhr.send(formData);
     }
   </script>

   Copier après la connexion

   Lors de l'envoi de données de formulaire via XMLHttpRequest, vous devez faire attention à la construction de l'objet FormData et l'utiliser comme paramètre de la méthode send() pour envoyer les données.

3. Soumettre des formulaires à l'aide des bibliothèques AJAX :

   Les bibliothèques AJAX, telles que jQuery, offrent un moyen plus pratique d'effectuer des soumissions de formulaires. L'exemple de code est le suivant :

   <form id="myForm">
     <input type="text" name="username" />
     <input type="password" name="password" />
     <button type="button" onclick="submitForm()">提交</button>
   </form>
   
   <script src="jquery.min.js"></script>
   <script>
     function submitForm() {
       var formData = $("#myForm").serialize();
   
       $.post("submit.php", formData, function(response) {
         console.log(response);
       });
     }
   </script>

   Copier après la connexion

   Dans le code ci-dessus, en sérialisant les données du formulaire, en utilisant la méthode $.post() pour envoyer les données au serveur et en traitant les résultats de la réponse dans la fonction de rappel.

Ci-dessus sont plusieurs méthodes courantes de soumission de formulaires JS et leurs exemples de code. En fonction des besoins spécifiques et de la pile technologique, choisissez la méthode appropriée pour mettre en œuvre la soumission du formulaire. J'espère que le contenu de cet article vous sera utile.

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!