Welche verschiedenen Methoden zur Übermittlung von JS-Formularen gibt es?

Welche Möglichkeiten gibt es, JS-Formulare einzureichen?

In der Frontend-Entwicklung sind Formulare eine der wichtigen Formen der Dateninteraktion zwischen Benutzern und Webseiten. JavaScript als leistungsstarke Skriptsprache ermöglicht uns die Übermittlung von Formulardaten auf verschiedene Arten. Im Folgenden werden einige gängige Methoden zur Übermittlung von JS-Formularen vorgestellt und spezifische Codebeispiele bereitgestellt.

1. Senden Sie das Formular mit der Methode „submit()“ des Formularelements:

   Dies ist die einfachste Möglichkeit, die Methode „submit()“ des Formularelements direkt aufzurufen, um das Formular abzusenden. Das Codebeispiel lautet wie folgt:

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

   Nach dem Login kopieren

   Wenn im obigen Code auf die Schaltfläche „Senden“ geklickt wird, wird die Funktion „submitForm()“ aufgerufen, um die Formulardaten an die Seite „submit.php“ zu senden.

2. Verwenden Sie das XMLHttpRequest-Objekt, um ein Formular zu senden:

   Das XMLHttpRequest-Objekt ist eine Technologie, die für die Dateninteraktion mit dem Server im Hintergrund verwendet wird. Senden Sie Formulardaten an den Server, indem Sie ein XMLHttpRequest-Objekt erstellen. Das Codebeispiel lautet wie folgt:

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

   Nach dem Login kopieren

   Beim Senden von Formulardaten über XMLHttpRequest müssen Sie auf die Konstruktion des FormData-Objekts achten und es als Parameter der send()-Methode zum Senden der Daten verwenden.

3. Formulare mithilfe von AJAX-Bibliotheken senden:

   AJAX-Bibliotheken wie jQuery bieten eine bequemere Möglichkeit, Formularübermittlungen durchzuführen. Das Codebeispiel lautet wie folgt:

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

   Nach dem Login kopieren

   Im obigen Code werden die Formulardaten serialisiert, die Methode $.post() verwendet, um die Daten an den Server zu senden, und die Antwortergebnisse werden in der Rückruffunktion verarbeitet.

Oben sind einige gängige JS-Formularübermittlungsmethoden und deren Codebeispiele aufgeführt. Wählen Sie entsprechend den spezifischen Anforderungen und dem Technologie-Stack die geeignete Methode zur Implementierung der Formularübermittlung aus. Ich hoffe, dass der Inhalt dieses Artikels für Sie hilfreich ist.

Das obige ist der detaillierte Inhalt vonWelche verschiedenen Methoden zur Übermittlung von JS-Formularen gibt es?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!