NOTAS WEB
Realizar peticiones POST/GET con AJAX y Jquery
Cuantas veces has tenido que enviar datos de un formulario a una API o backend, y no has sabido o no te has acordado de como poder implementar de forma rápida y sencilla una petición dinámica sin tener que recargar la página.
Bueno pues, aquí tienes una buena forma de implementar esta funcionalidad apoyándote en AJAX y Jquery para poder hacerlo se una forma sencilla.
Antes de nada una pequeña introducción para saber que es cada cosa.
¿Que es AJAX?
AJAX, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones web asíncronas. Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible interactuar con el servidor sin necesidad de recargar la página web, mejorando la interactividad, velocidad y usabilidad en las aplicaciones.
¿Que es Jquery?
jQuery es una biblioteca multiplataforma de JavaScript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web.
Ahora sí, pasemos a la practica y realicemos un pequeño ejemplo. Crearemos un formulario con dos campos input de correo y contraseña. Mediante AJAX y Jquery, realizaremos una petición post a un endpoint construido en Laravel.
Primero crearemos un pequeño formulario en html, donde importaremos la librería de jquery para poder hacer uso de la misma.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Login APP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body class="font-sans antialiased">
<div class="min-h-screen bg-gray-100">
<main>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<main class="col-xs-12 col-lg-9" style="margin-top: 50px">
<div class="container">
<h1 style="margin-top: 80px">Login</h1>
<article class="editor -margin-vertical">
<h2 style="font-family: 'opensans',Arial,'sans-serif'; font-size: 1.4rem; line-height: 2.4rem; letter-spacing: 0;color: #555;">
Formulario de acceso
</h2>
<form method="post" name="formulario" id="formulario">
<div class="form__group">
<label for="email">EMAIL:</label>
<input style="width: 100%;background-color: beige;height: 48px; padding: 10px;"
type="email" name="email" id="email" placeholder="EMAIL">
</div>
<div class="form__group">
<label for="contraseña">Password:</label>
<input style="width: 100%; background-color: beige; height: 48px; padding: 10px;"
type="password" name="password" id="password" placeholder="PASSWORD">
</div>
<button type="submit" name="submitForm" id="submitForm" >
Acceder
</button>
</form>
</article>
</div>
</main>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
Ahora construiremos el script donde realizaremos la petición post al endpoint, de una API externa que he creado en Laravel, para poder recibir peticiones.
Si quieres saber como construir un APIRest en Laravel, te animo a que entres en este tutoríal que cree. Donde te explico paso a paso, como crear distintos endpoints, con autenticación y registro de usuarios.
El script que hemos generado, lo pondremos entre la etiqueta de cierre del body y la última etiqueta de cierre del div.
<script>
$(document).ready(function() { $('#formulario').submit(function(e) {
e.preventDefault();
document.getElementById('submitForm').disabled = true;
$.ajax({
type: "POST",
url: 'http://localhost:8080/api/v1/login',
headers: {'Authorization': 'Bearer xxxxxxxxxxxxx'},
data: $(this).serialize(),
success: function(response)
{
alert('Acceso validado correctamente');
$('#email').val('');
$('#password').val('');
document.getElementById('submitForm').disabled = false;
},
error:function(error){
console.log(e.message);
}
});
});
});
</script>Con esto podrás estar enviando datos desde el front al back, de una forma rápida y dinámica sin tener que refrescar la vista de tú página.
Peculiaridades de esta petición. Se le añade un cabecera añadiéndole la propiedad «Authorization» y un token. Necesario para los casos en los que el endpoint o la aplicación en concreto, necesite que este autorizado para realizar peticiones.
Además, también se deshabilita el botón de enviar, para que no puedan volver a enviar otra petición, en el caso de que el tiempo de respuesta fuera un poco más alto del deseado.
En el caso de que esos datos se enviarán a otro archivo y no aun endpoint, por ejemplo archivo .php, o una ruta interna de nuestra aplicación. Únicamente habría que cambiar el valor del parámetro url por el de la ruta donde se encontrara nuestro archivo con extensión .php o el nombre de la ruta si trabajas con frameworks como Laravel.
Buen código a tod@s!!
Desarrollador de software con más de 7 años de experiencia, especializado en desarrollo web y backend. Con habilidades demostradas en PHP, Laravel, Symfony, y una amplia gama de tecnologías modernas. Apasionado por el diseño y desarrollo de software.
