Cómo enviar formularios AJAX con jQuery

Introducción

jQuery se puede combinar con el envío de formularios para gestionar la validación. Esto tiene la ventaja de proporcionar a los usuarios información sobre cualquier error en sus datos ingresados.

En este tutorial, se le presentará un formulario de muestra que se comunica con un backend PHP. El formulario utilizará jQuery para procesar un formulario sin actualizar la página (usando AJAX), indicará cualquier error y también mostrará un mensaje de éxito.

Implemente sus aplicaciones frontend desde GitHub con la plataforma de aplicaciones DigitalOcean . Deje que DigitalOcean se concentre en escalar su aplicación.

Prerrequisitos

Para completar este tutorial, necesitarás:

• Este tutorial asume que tienes PHP instalado localmente y que puedes ejecutar el servidor web integrado . Es posible que puedas consultar uno de nuestros tutoriales para instalar PHP en tu entorno .
• Algunos conocimientos sobre selectores y métodos de la biblioteca jQuery .
• Alguna familiaridad con las clases de la biblioteca Bootstrap .
• Un editor de código.
• Un navegador web moderno.

Nota: este tutorial no especifica las últimas versiones de jQuery (actualmente 3.5.1) o Bootstrap (actualmente 5.0.0-beta1). Sin embargo, muchas de las lecciones de este tutorial aún se aplican a las últimas versiones.

Este tutorial fue verificado con PHP v7.3.24, jQuery v2.0.3 y Bootstrap v3.0.3.

Paso 1: creación del backend con PHP

Para los propósitos de este tutorial, el backend se escribirá en PHP.

Primero, abra una ventana de terminal y cree un nuevo directorio de proyecto:

mkdir jquery-form-validation

Navegue hasta este nuevo directorio del proyecto:

cd jquery-form-validation

Luego, usa tu editor de código para crear un nuevo process.phparchivo:

proceso.php

?php$errors = [];$data = [];if (empty($_POST['name'])) {    $errors['name'] = 'Name is required.';}if (empty($_POST['email'])) {    $errors['email'] = 'Email is required.';}if (empty($_POST['superheroAlias'])) {    $errors['superheroAlias'] = 'Superhero alias is required.';}if (!empty($errors)) {    $data['success'] = false;    $data['errors'] = $errors;} else {    $data['success'] = true;    $data['message'] = 'Success!';}echo json_encode($data);

Este archivo aceptará los valores de name, emaily superheroAlias. Si no se proporciona alguno de estos valores, se enviará un mensaje de error. Se pueden realizar muchas otras validaciones en este punto, pero para los fines de este tutorial, solo se asegurará de que se hayan proporcionado estas entradas obligatorias. De lo contrario, si hay un valor para name, emaily superheroAlias, se enviará un mensaje de confirmación de que la operación se realizó correctamente.

Nota: En un escenario del mundo real, el backend también sería responsable de otras tareas, como tomar los datos y guardar los cambios en una base de datos, crear una sesión o enviar un correo electrónico.

Ahora que ha completado el procesamiento del formulario, puede crearlo.

Paso 2: creación del frontend con HTML y CSS

Para los propósitos de este tutorial, se utilizará Bootstrap para crear las vistas.

En el directorio de su proyecto, utilice su editor de código para crear un index.htmlarchivo:

índice.html

!DOCTYPE htmlhtml  head    titlejQuery Form Example/title    link      rel="stylesheet"      href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"    /    script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"/script/head  body    div      h1Processing an AJAX Form/h1      form action="process.php" method="POST"        div          label for="name"Name/label          input            type="text"                                  name="name"            placeholder="Full Name"          /        /div        div          label for="email"Email/label          input            type="text"                                  name="email"            placeholder="email@example.com"          /        /div        div          label for="superheroAlias"Superhero Alias/label          input            type="text"                                  name="superheroAlias"            placeholder="Ant Man, Wonder Woman, Black Panther, Superman, Black Widow"          /        /div        button type="submit"          Submit        /button      /form    /div  /body/html

Se hará referencia a la versión CDN (red de distribución de contenido) de Bootstrap y jQuery. El formulario actionse configurará en el archivo PHP que se creó anteriormente. El formulario constará de campos para name, email, y superheroAlias. El formulario también necesitará un botón Enviar .

Abra una ventana de terminal y navegue hasta el directorio del proyecto. Ejecute el servidor PHP:

php -S localhost:8000

Visite localhost:8000su navegador web y observe lo siguiente:

Ahora que ya tienes el formulario completo, puedes crear el script para gestionar el envío del formulario.

Paso 3: Manejo de la lógica de envío de formularios en JavaScript y jQuery

Para enviar un formulario a través de AJAX, su script deberá manejar cuatro tareas:

• Captura el botón de envío del formulario para que no se realice la acción predeterminada.
• Obtenga todos los datos del formulario usando jQuery.
• Envíe los datos del formulario mediante AJAX.
• Mostrar errores si hay alguno.

En el directorio de su proyecto, utilice su editor de código para crear un nuevo form.jsarchivo:

formulario.js

$(document).ready(function () {  $("form").submit(function (event) {    var formData = {      name: $("#name").val(),      email: $("#email").val(),      superheroAlias: $("#superheroAlias").val(),    };    $.ajax({      type: "POST",      url: "process.php",      data: formData,      dataType: "json",      encode: true,    }).done(function (data) {      console.log(data);    });    event.preventDefault();  });});

Este código recupera los datos de los campos name, emaily superheroAlias. Luego realiza una solicitud AJAX a process.phpcon una carga útil de datos del formulario. Después de una conexión exitosa, la consola registrará los datos de respuesta. event.preventDefault()se utiliza para evitar que el formulario se comporte de manera predeterminada al volver a cargar la página al enviarla.

Después de guardar los cambios en form.js, vuelva a visitar el index.htmlarchivo con el editor de código. Agregue una referencia al nuevo archivo JavaScript:

índice.html

!DOCTYPE htmlhtml  head    titlejQuery Form Example/title    !-- ... --    script src="form.js"/script/head!-- ... --

Ahora, cuando un usuario presiona el botón Enviar en el formulario, el código JavaScript recuperará todos los valores de entrada y enviará una solicitud POST a process.php.

Nota: utilizará la .donedevolución de llamada para gestionar una solicitud AJAX exitosa. Antes se llamaba .success, pero ya no se utiliza en jQuery 1.8+.

Otra alternativa es utilizar serializeen lugar de extraer la información del formulario individualmente.

El script PHP procesará las entradas que envió la llamada AJAX y devolverá la $data[]matriz que se creó. Puede observar esto en la consola de su navegador después de enviar el formulario:

Ahora que ya tienes completada la lógica del formulario, puedes crear el script para manejar los errores del formulario.

Paso 4: Visualización de errores de validación de formularios

En el script PHP, el código comprueba que todos los campos sean obligatorios. Si un campo no está presente, se devuelve un error.

Revise form.jsy agregue las siguientes líneas de código resaltadas:

formulario.js

// ...    $.ajax({      type: "POST",      url: "process.php",      data: formData,      dataType: "json",      encode: true,    }).done(function (data) {      console.log(data);      if (!data.success) {        if (data.errors.name) {          $("#name-group").addClass("has-error");          $("#name-group").append(            'div' + data.errors.name + "/div"          );        }        if (data.errors.email) {          $("#email-group").addClass("has-error");          $("#email-group").append(            'div' + data.errors.email + "/div"          );        }        if (data.errors.superheroAlias) {          $("#superhero-group").addClass("has-error");          $("#superhero-group").append(            'div' + data.errors.superheroAlias + "/div"          );        }      } else {        $("form").html(          'div' + data.message + "/div"        );      }    });    event.preventDefault();  });// ...

Este código comprueba si la respuesta contiene un error en cada campo. Si hay un error, agrega una has-errorclase y adjunta el mensaje de error.

Ahora, vuelva a visitar su formulario en un navegador web y experimente enviando datos con el formulario.

Si hay algún error que regresa del servidor, el formulario proporcionará información sobre los campos obligatorios:

Y si no hay errores que regresen del servidor, el formulario proporcionará información sobre un envío exitoso:

Cada vez que enviamos el formulario, los errores del envío anterior siguen ahí. Deberás eliminarlos tan pronto como vuelvas a enviar el formulario.

Revise form.jsy agregue las siguientes líneas de código resaltadas:

formulario.js

// ...  $("form").submit(function (event) {    $(".form-group").removeClass("has-error");    $(".help-block").remove();    // ...  });// ...

Este código eliminará la has-errorclase de todos .form-grouplos elementos. También eliminará todos .help-blocklos elementos con mensajes de error.

Paso 5: Visualización de errores de conexión al servidor

Si se produce un error al conectarse al servidor, no habrá respuesta JSON de la llamada AJAX. Para evitar que los usuarios esperen una respuesta que nunca llegará, puede proporcionar un mensaje de error para las fallas de conexión.

Revise form.jsy agregue las siguientes líneas de código resaltadas:

formulario.js

// ...    $.ajax({      type: "POST",      url: "process.php",      data: formData,      dataType: "json",      encode: true,    })      .done(function(data) {        // ...      })      .fail(function (data) {        $("form").html(          'div class="alert alert-danger"Could not reach server, please try again later./div'        );      });// ...

Si el servidor falla o no funciona por cualquier motivo, un usuario que intente enviar un formulario recibirá un mensaje de error:

Ahora que ya tienes completo el mensaje de error del servidor, has completado el formulario de ejemplo.

Usando $.posten lugar de$.ajax

jQuery también proporciona un $.postmétodo abreviado como alternativa a $.ajax.

El $.ajaxcódigo form.jspodría reescribirse con $.post:

$.post('process.php', function(formData) {  // place success code here})  .fail(function(data) {    // place error code here  });

La ventaja $.postes que no es necesario declarar tanta configuración de conexión.

Conclusión

En este artículo, creó un formulario de muestra que se comunica con un backend PHP con jQuery y muestra cualquier error en el formulario.

Como siguiente paso, querrá explorar validaciones más complejas, como direcciones de correo electrónico y fechas válidas. También puede interesarle aplicar validaciones del lado del cliente que funcionen en el navegador.

Si desea obtener más información sobre JavaScript, consulte nuestra página de temas de JavaScript para obtener ejercicios y proyectos de programación.