What are the different js form submission methods?

What are the ways to submit JS forms?

In front-end development, forms are one of the important forms of data interaction between users and web pages. JavaScript, as a powerful scripting language, allows us to submit form data in a variety of ways. The following will introduce several common JS form submission methods and provide specific code examples.

1. Use the submit() method of the form element to submit the form:

   This is the most basic way, directly call the submit() method of the form element to submit the form . The code example is as follows:

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

   In the above code, when the submit button is clicked, the submitForm() function is called to submit the form data to the submit.php page.

2. Use the XMLHttpRequest object to submit the form:

   The XMLHttpRequest object is a technology used for data interaction with the server in the background. Send form data to the server by creating an XMLHttpRequest object. The code example is as follows:

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

   When sending form data through XMLHttpRequest, you need to pay attention to constructing the FormData object and use it as a parameter of the send() method to send the data.

3. Use AJAX library to submit forms:

   AJAX libraries, such as jQuery, provide a more convenient way to submit forms. The code example is as follows:

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

   In the above code, by serializing the form data, using the $.post() method to send the data to the server, and processing the response results in the callback function.

The above are several common JS form submission methods and their code examples. According to the specific needs and technology stack, choose the appropriate method to implement form submission. I hope the content of this article is helpful to you.

The above is the detailed content of What are the different js form submission methods?. For more information, please follow other related articles on the PHP Chinese website!