Cómo Enviar formularios AJAX con jQuery
Introducción
jQuery se puede emparejar con el envío de formularios para gestionar la validación. Esto tiene la ventaja de proporcionar a los usuarios comentarios sobre cualquier error en su entrada.
En este tutorial, se le presentará un formulario de ejemplo que se comunica con un motor PHP. El formulario usará jQuery para procesar un formulario sin actualizar la página (usando AJAX), indicar cualquier error y también mostrar un mensaje de éxito.
Requisitos previos
Para completar este tutorial, necesitará:
- Este tutorial asume que tiene PHP instalado localmente y es capaz de ejecutar el servidor web integrado. Puede consultar uno de nuestros tutoriales para instalar PHP en su entorno.
- Cierta familiaridad con los selectores y métodos de la biblioteca jQuery.
- Cierta familiaridad con las clases de la biblioteca de 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 todavía pertenecen a las últimas versiones.
Este tutorial se verificó con PHP v7.3.24, jQuery v2.0.3 y Bootstrap v3.0. 3.
Paso 1-Construyendo el Backend con PHP
Para los propósitos de este tutorial, el backend será escrito en PHP.
Primero, abra una ventana de terminal y cree un nuevo directorio de proyecto:
- mkdir jquery-form-validation
Vaya a este nuevo directorio de proyectos:
- cd jquery-form-validation
A continuación, utilice su editor de código para crear un nuevo proceso de archivo process.php:
<?php$errors = ;$data = ;if (empty($_POST)) { $errors = 'Name is required.';}if (empty($_POST)) { $errors = 'Email is required.';}if (empty($_POST)) { $errors = 'Superhero alias is required.';}if (!empty($errors)) { $data = false; $data = $errors;} else { $data = true; $data = 'Success!';}echo json_encode($data);Este archivo tomará valores para name, email y superheroAlias. Si no se proporciona alguno de estos valores, se enviará un mensaje de error. Se podrían realizar muchas otras validaciones en este punto, pero para los propósitos de este tutorial, solo se asegurará de que se hayan proporcionado estas entradas requeridas. De lo contrario, si está presente un valor para name, email y superheroAlias, se devolverá un mensaje de éxito.
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 crear el formulario.
Paso 2-Construyendo el Frontend con HTML y CSS
Para los propósitos de este tutorial, Bootstrap se usará para construir las vistas.
En el directorio del proyecto, utilice el editor de código para crear un archivo index.html:
<!DOCTYPE html><html> <head> <title>jQuery 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 class="col-sm-6 col-sm-offset-3"> <h1>Processing an AJAX Form</h1> <form action="process.php" method="POST"> <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" name="name" placeholder="Full Name" /> </div> <div class="form-group"> <label for="email">Email</label> <input type="text" class="form-control" name="email" placeholder="[email protected]" /> </div> <div class="form-group"> <label for="superheroAlias">Superhero Alias</label> <input type="text" class="form-control" name="superheroAlias" placeholder="Ant Man, Wonder Woman, Black Panther, Superman, Black Widow" /> </div> <button type="submit" class="btn btn-success"> Submit </button> </form> </div> </body></html>Se hará referencia a la versión CDN (content delivery network) de Bootstrap y jQuery. El formulario action se establecerá 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 vaya al directorio del proyecto. Y ejecute el servidor PHP:
- php -S localhost:8000
Visite localhost:8000 en su navegador web y observe lo siguiente:
Ahora que ha completado el formulario, puede 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 enviar formulario para que no se realice la acción predeterminada.
- Obtenga todos los datos del formulario usando jQuery.
- Envíe los datos del formulario usando AJAX.
- Muestra errores si hay alguno.
En el directorio de tu proyecto, usa tu editor de código para crear un nuevo archivo form.js: formulario
$(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, email y superheroAlias. Luego realiza una solicitud AJAX a process.php con una carga útil de datos de formulario. Después de una conexión correcta, la consola registrará los datos de respuesta. event.preventDefault() se usa para evitar que el formulario se comporte de forma predeterminada al recargar la página al enviarla.
Después de guardar los cambios en form.js, vuelva a visitar el archivo index.html con su editor de código. Agregar una referencia al nuevo archivo JavaScript:
<!DOCTYPE html><html> <head> <title>jQuery 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: Usará la devolución de llamada .done para manejar una solicitud AJAX exitosa. Esto solía llamarse .success, pero desde entonces ha quedado obsoleto en jQuery 1.8+.
Otra alternativa es usar serialize en lugar de extraer la información del formulario individualmente.
El script PHP procesará las entradas que envió la llamada AJAX y devolverá el array $data que se creó. Puede observar esto en la consola de su navegador después de enviar su formulario:
Ahora que ha completado la lógica del formulario, puede crear el script para manejar los errores de formulario.
Paso 4: Muestra Errores de validación de formularios
En el script PHP, el código comprueba que todos los campos son obligatorios. Si un campo no está presente, se devuelve un error.
Vuelva a visitar form.js y agregue las siguientes líneas de código resaltadas: formulario
// ... $.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 class="help-block">' + data.errors.name + "</div>" ); } if (data.errors.email) { $("#email-group").addClass("has-error"); $("#email-group").append( '<div class="help-block">' + data.errors.email + "</div>" ); } if (data.errors.superheroAlias) { $("#superhero-group").addClass("has-error"); $("#superhero-group").append( '<div class="help-block">' + data.errors.superheroAlias + "</div>" ); } } else { $("form").html( '<div class="alert alert-success">' + data.message + "</div>" ); } }); event.preventDefault(); });// ...Este código comprueba si la respuesta contiene un error para cada campo. Si hay un error, agrega una clase has-error y agrega el mensaje de error.
Ahora, vuelva a visitar su formulario en un navegador web y experimente con el envío de datos con el formulario.
Si hay algún error que regrese del servidor, el formulario proporcionará comentarios sobre los campos obligatorios:
Y si no hay errores que vuelvan del servidor, el formulario proporcionará comentarios para un envío exitoso:
Cada vez que enviamos el formulario, nuestros errores de nuestro envío anterior siguen ahí. Tendrá que eliminarlos tan pronto como vuelva a enviar el formulario.
Vuelva a visitar form.js y agregue las siguientes líneas de código resaltadas:formulario
// ... $("form").submit(function (event) { $(".form-group").removeClass("has-error"); $(".help-block").remove(); // ... });// ... Este código eliminará la clase has-error de todos los elementos .form-group. También eliminará todos los elementos .help-block con mensajes de error.
Paso 5-Visualización de errores de conexión al servidor
Si hay 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 por errores de conexión.
Vuelva a visitar form.js y agregue las siguientes líneas de código resaltadas: formulario
// ... $.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 está dañado o averiado por cualquier motivo, un usuario que intente enviar un formulario recibirá un mensaje de error:
Ahora que ha completado el mensaje de error del servidor, ha completado el formulario de ejemplo.
Usando $.publicar en lugar de post.ajax
jQuery también proporciona un método abreviado $.post como alternativa a $.ajax.
El código $.ajax en form.js se puede reescribir con $.post:
$.post('process.php', function(formData) { // place success code here}) .fail(function(data) { // place error code here }); La ventaja de $.post es que no requiere tanta configuración de conexión para ser declarada.
Conclusión
En este artículo, creó un formulario de ejemplo que se comunica con un motor 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 ejercicios y proyectos de programación.