jQuery: Formular mit AJAX senden

Habdul Hazeez 15 Februar 2024 jQuery jQuery AJAX
  1. Formular mit AJAX in jQuery senden: Direkter Ansatz
  2. Verwenden Sie das jQuery-Formular-Plugin, um ein Formular mit AJAX in jQuery zu senden
  3. Formular mit AJAX in jQuery senden: Der FormData-Ansatz
jQuery: Formular mit AJAX senden

In diesem Artikel lernen Sie drei Methoden zum Senden eines Formulars mit AJAX-in-jQuery kennen. Das erste ist die direkte Verwendung von AJAX-in-jQuery, während das zweite das AJAX Form Plugin verwendet.

Bei der dritten Methode verwenden wir das Objekt FormData, um die Formulardaten zu erfassen, bevor wir sie mit AJAX senden.

Formular mit AJAX in jQuery senden: Direkter Ansatz

Wir nennen dies einen “direkten Ansatz”, weil es keine externe Bibliothek oder irgendetwas Besonderes gibt. Zuerst richten Sie Ihr HTML-Formular ein und stellen sicher, dass Sie die richtigen Namensattribute haben.

Verwenden Sie dann jQuery, um Folgendes zu tun.

  1. Verwenden Sie jQuery, um auf die Formularübermittlung zu lauschen.
  2. Verhindern Sie das standardmäßige Übermittlungsverhalten.
  3. Verwenden Sie die Methode ajax() in jQuery, um eine AJAX-Verbindung zu starten.
  4. Stellen Sie sicher, dass die Eigenschaft type in ajax() POST ist.
  5. Stellen Sie sicher, dass der Wert der Eigenschaft url dem Wert des HTML-Attributs action entspricht.
  6. Stellen Sie sicher, dass der Wert der Eigenschaft data ein serialisiertes Format aller Formulareingaben ist.
  7. Verarbeiten Sie die Rückgabedaten mit einer Funktion als Wert der Eigenschaft success.
  8. Verarbeiten Sie alle Fehler, indem Sie die Funktion als Wert der Eigenschaft Fehler verwenden.

Die Codeimplementierung dieser Schritte finden Sie im folgenden Code. Beachten Sie, dass der Wert des HTML-Formularattributs ein PHP-Skript ist, das das Formular verarbeitet.

Dieses Mal zeigen wir nur die übermittelten Daten in der Konsole an. Sie können die Formulardaten jedoch an eine Datenbank senden; Sie finden das PHP-Skript am Ende dieses Artikels.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>01-jQuery AJAX Submit form</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        body { display: grid; justify-content: center; align-items: center; height: 100vh; }
        form { border: 3px solid #1560bd; font-size: 1.2em; padding: 1.2em; }
    </style>
</head>
<body>
    <main>
        <form id="html_form" action="process-jquery-form.php" method="POST">
            <label for="first_name">First name</label>
            <input id="first_name" type="text" name="first_name" required>
            <label for="last_name">Last name</label>
            <input id="last_name" type="text" name="last_name" required>
            <input type="submit" name="submit" value="Submit form">
        </form>
    </main>
    <script>
        $("#html_form").submit(function(event) {
            // Prevent the default submit behavior
            event.preventDefault();
            // "this" refers to the current HTML form
            let current_html_form = $(this);
            let action_url = current_html_form.attr('action');

            $.ajax({
                type: "POST",
                url: action_url,
                data: current_html_form.serialize(), // Turn the form elements into a usable string
                success: function (data) {
                    console.log(data);
                },
                error: function (data) {
                    alert("An error occurred during form submission");
                },
            });
        });
    </script>
</body>
</html>

Ausgang:

Senden von AJAX-Formularen mit jQuery

Verwenden Sie das jQuery-Formular-Plugin, um ein Formular mit AJAX in jQuery zu senden

Diese Methode führt zum Senden des Formulars mit AJAX in jQuery, aber anders. Wir verwenden diesmal die Methode ajaxForm im jQuery Form Plugin.

Es hat den gleichen Ansatz zum Senden des Formulars mit AJAX, mit der folgenden Ausnahme.

  1. Importieren Sie das jQuery Form Plugin in Ihr Skript.
  2. Verwenden Sie die ajaxForm-Methode des Plugins. Dieser kümmert sich hinter den Kulissen um die Formularübermittlung.
  3. Der Wert der Eigenschaft url ist der Name des Skripts, das die übermittelten Daten verarbeitet.
  4. Sie schreiben nicht $.ajax(), sondern $(form_selector).ajaxForm(). Wobei form_selector der Klassen- oder ID-Name Ihres HTML-Formulars ist.

Wir haben diese Schritte im folgenden Code implementiert. Sie können die Ausgabe im nächsten Bild überprüfen.

Zur Erinnerung finden Sie das PHP-Skript am Ende des Artikels.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>02-jQuery-AJAX-with-AJAX-Form.html</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js" integrity="sha512-YUkaLm+KJ5lQXDBdqBqk7EVhJAdxRnVdT2vtCzwPHSweCzyMgYV/tgGF4/dCyqtCC2eCphz0lRQgatGVdfR0ww==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <style>
        body { display: grid; justify-content: center; align-items: center; height: 100vh; }
        form { border: 3px dotted #0a9; font-size: 1.2em; padding: 1.2em; }
    </style>
</head>
<body>
    <main>
        <form id="html_form" action="process-jquery-form.php" method="POST">
            <label for="first_name">First name</label>
            <input id="first_name" type="text" name="first_name" required>
            <label for="last_name">Last name</label>
            <input id="last_name" type="text" name="last_name" required>
            <input type="submit" name="submit" value="Submit form">
        </form>
    </main>
    <script>
        $(function(){
            $('#html_form').ajaxForm({
                type: "POST",
                url:'process-jquery-form.php',
                success: function (data) {
                    console.log(data);
                },
                error: function (data) {
                    alert("An error occurred during form submission");
                },
            })
        });
    </script>
</body>
</html>

Ausgang:

Formularübermittlung mit jQuery Form Plugin

Formular mit AJAX in jQuery senden: Der FormData-Ansatz

Diese Methode ist die gleiche wie der direkte Ansatz, da keine externe Bibliothek beteiligt ist. Aber dieses Mal holen wir uns die Formulardaten mit dem FormData-Objekt.

Die restlichen Schritte in der ajax()-Methode bleiben mit den folgenden Ergänzungen gleich.

  1. Fügen Sie die Eigenschaft processData hinzu und setzen Sie deren Wert auf false.
  2. Fügen Sie die Eigenschaft contentType hinzu und setzen Sie deren Wert auf false.
  3. Die Funktion in der Eigenschaft error sollte jQXHR, textStatus und errorMessage als Argumente haben. Dann zeigen Sie eine Fehlermeldung mit dem Argument errorMessage an.

Der folgende Code zeigt Ihnen, wie Sie dies tun. Das PHP-Skript finden Sie im nächsten Abschnitt.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>03-jQuery-AJAX-with-FormData.html</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        body { display: grid; justify-content: center; align-items: center; height: 100vh;}
        form { border: 3px dashed #1975c7; font-size: 1.2em; padding: 1.2em; }
    </style>
</head>
<body>
    <main>
        <form id="html_form" action="process-jquery-form.php" method="POST">
            <label for="first_name">First name</label>
            <input id="first_name" type="text" name="first_name" required>
            <label for="last_name">Last name</label>
            <input id="last_name" type="text" name="last_name" required>
            <input type="submit" name="submit" value="Submit form">
        </form>
    </main>
    <script>
        $("#html_form").submit(function(event) {
            // Prevent the default submit behavior
            event.preventDefault();

            let current_html_form = $(this);
            let action_url = current_html_form.attr('action');
            // Grab the form data using the FormData Object
            // Later, we'll use the data in the ajax request.
            let form_data = new FormData(document.getElementById('html_form'));

            $.ajax({
                type: "POST",
                url: action_url,
                data: form_data,
                processData: false,
                contentType: false,
                success: function (data) {
                    console.log(data);
                },
                error: function (jQXHR, textStatus, errorMessage) {
                    console.log(errorMessage);
                },
            });
        });
    </script>
</body>
</html>

Ausgang:

Erfassen Sie Formulardaten mit dem FormData-Objekt, bevor Sie sie mit AJAX senden

PHP-Skript für das HTML-Formular

Das Folgende ist das PHP-Skript, das zum Verarbeiten der HTML-Formulare in diesem Beispiel verwendet wird. Sie können es in Ihrem Arbeitsverzeichnis als process-jquery-form.php speichern.

<?php
    // We detect an AJAX request from jQuery before
    // processing the form data.
    if (!empty($_SERVER['HTTP_X_REQUESTED_WITH'])
        && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
        if (isset($_POST['first_name']) && isset($_POST['last_name'])) {
            $first_name = $_POST['first_name'];
            $last_name = $_POST['last_name'];
            // Here, we show the first and last names.
            // In your application, you can send them
            // to your database.
            echo "Hello " . htmlspecialchars($first_name) ." " . htmlspecialchars($last_name);
        }
    }
?>
Genießen Sie unsere Tutorials? Abonnieren Sie DelftStack auf YouTube, um uns bei der Erstellung weiterer hochwertiger Videoanleitungen zu unterstützen. Abonnieren
Autor: Habdul Hazeez
Habdul Hazeez avatar Habdul Hazeez avatar

Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.

LinkedIn

Verwandter Artikel - jQuery AJAX