jQuery: enviar formulario con AJAX

  2. HowTo
  3. jQuery Howtos
  4. jQuery: enviar formulario con AJAX
Habdul Hazeez 15 febrero 2024
jQuery jQuery AJAX
  1. Enviar formulario con AJAX en jQuery: enfoque directo
  2. Use el complemento de formulario jQuery para enviar el formulario con AJAX en jQuery
  3. Enviar formulario con AJAX en jQuery: el enfoque FormData
jQuery: enviar formulario con AJAX

Este artículo le enseña tres métodos que enviarán un formulario usando AJAX-in-jQuery. El primero es el uso directo de AJAX-in-jQuery, mientras que el segundo emplea el Complemento de formulario AJAX.

En el tercer método, usamos el objeto FormData para capturar los datos del formulario antes de enviarlo usando AJAX.

Enviar formulario con AJAX en jQuery: enfoque directo

Llamamos a esto un “enfoque directo” porque no hay una biblioteca externa ni nada especial. Primero, configura su formulario HTML y se asegura de tener los atributos de nombre correctos.

Luego use jQuery para hacer lo siguiente.

  1. Use jQuery para escuchar el envío del formulario.
  2. Evite el comportamiento de envío predeterminado.
  3. Use el método ajax() en jQuery para iniciar una conexión AJAX.
  4. Asegúrese de que la propiedad tipo en ajax() sea POST.
  5. Asegúrese de que el valor de la propiedad url sea el valor del atributo HTML acción.
  6. Asegúrese de que el valor de la propiedad datos sea un formato serializado de todas las entradas del formulario.
  7. Procese los datos devueltos utilizando una función como valor de la propiedad success.
  8. Procese cualquier error utilizando la función como valor de la propiedad error.

Encontrará la implementación del código de estos pasos en el siguiente código. Tenga en cuenta que el valor del atributo de formulario HTML es un script PHP que “procesa” el formulario.

Esta vez, solo mostramos los datos enviados en la consola. Pero puede enviar los datos del formulario a una base de datos; encontrará el script PHP al final de este artículo.

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

Producción:

Enviar formulario AJAX con jQuery

Use el complemento de formulario jQuery para enviar el formulario con AJAX en jQuery

Este método da como resultado el envío del formulario usando AJAX en jQuery pero de manera diferente. Usaremos el método ajaxForm en el complemento jQuery Form esta vez.

Tiene el mismo enfoque para enviar el formulario usando AJAX con la siguiente excepción.

  1. Importe el complemento de formulario jQuery en su secuencia de comandos.
  2. Utilice el método ajaxForm del complemento. Detrás de escena, esto se encarga del envío del formulario.
  3. El valor de la propiedad url es el nombre del script que procesará los datos enviados.
  4. No escribes $.ajax(), sino $(form_selector).ajaxForm(). Donde form_selector es la clase o el nombre de identificación de su formulario HTML.

Hemos implementado estos pasos en el siguiente código. Puedes comprobar la salida en la siguiente imagen.

Como recordatorio, encontrará el script PHP al final del artículo.

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

Producción:

Envío de formularios con jQuery Form Plugin

Enviar formulario con AJAX en jQuery: el enfoque FormData

Este método es el mismo que el enfoque directo porque no se trata de una biblioteca externa. Pero esta vez, tomamos los datos del formulario usando el objeto FormData.

Los pasos restantes en el método ajax() siguen siendo los mismos con las siguientes adiciones.

  1. Agregue la propiedad processData y establezca su valor en false.
  2. Agregue la propiedad contentType y establezca su valor en false.
  3. La función en la propiedad error debe tener jQXHR, textStatus y errorMessage como argumentos. Luego muestra un mensaje de error usando el argumento errorMessage.

El siguiente código le muestra cómo hacer esto. Encontrará el script PHP en la siguiente sección.

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

Producción:

Tome los datos del formulario con el objeto FormData antes de enviarlos con AJAX

Script PHP para el formulario HTML

El siguiente es el script PHP utilizado para procesar los formularios HTML en este ejemplo. Puede guardarlo en su directorio de trabajo como process-jquery-form.php.

<?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);
        }
    }
?>
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

Artículo relacionado - jQuery AJAX