Author : Jhon
Publicado : 1 julio, 2021
A quien no le ha pasado alguna vez mientras desarrollabas tu aplicación web, ha tocado realizar formularios de cualquier tipo, ya sea para crear una página de contacto, para actualizar una entidad, quizás al recuperar una contraseña y en cualquier infinidad de casos, luego de haber dado click en submit intentas actualizar la página y te aparece un cartelito de estos típico para los usuarios de chrome:
Esto puede ocasionar data duplicada en tu base de datos y muchos correos duplicados.
Bien llegados a este punto, primero vamos a considerar una solución interesante llamada el patrón PRG o también conocido como «POST/REDIRECT/GET», básicamente en lugar de retornar directamente a una página web, la operación POST devuelve un comando de redireccionamiento (30x), después de esto automáticamente es solicitado al servidor una petición GET donde finalmente es devuelto a una página de confirmación.
Para mostrarlo gráficamente tenemos esta imagen:
Este patrón se ha utilizado durante mucho tiempo cuando se presenta el problema de reenvío al desarrollar páginas web, es una forma muy inteligente de resolverlo, la única anotación que debo dejar en claro y que debes notar es que se debe hacer una llamada extra al servidor, luego de esto no hay ningún tipo de problema, puedes darle un vistazo más en este enlace, bien, en las líneas siguientes veremos como resolverlo de otra forma que también es muy practica.
Todos los navegadores actuales utilizan esta tecnología y prácticamente javascript esta hasta en la sopa, entonces podemos apalancarnos de eso para olvidarnos de la infinidad de dolores de cabeza y evitar el reenvío de solicitudes POST en formularios. Miremos el siguiente código:
if (window.history.replaceState) { // verificamos disponibilidad
window.history.replaceState(null, null, window.location.href);
}
Empecemos con window.history que se encarga de devolvernos una referencia al objeto History, a través de él podemos acceder al historial de sesión del navegador y manipularlo, si exactamente, ese historial que nos indica que páginas visitaste o en que página actualmente nos encontramos.
Dentro de ese objeto tenemos disponible la función replaceState, que como su mismo nombre lo indica reemplaza el estado de historial, lo único de que nos pide son 3 parámetros: objeto/null para el estado, un titulo, y una URL, en este último parámetro debemos pasar la url actual.
Este código debe ser agregado en la página donde esta tu formulario, así de simple, ahora ya puedes pedir correos electrónicos, actualizar tus categorías, enviar respuestas de tu cuestionario, etc y almacenarlo en mysql, postgres, o cualquier bd que estés utilizando, sin preocuparte de la duplicidad de la información que viene desde tu frontend.
NOTA:
Aquí encontraras un archivo para descargar esto es un ejemplo de un formulario en php echo con bootstrap 4.4 donde veras como se recogen los datos del formulario se valida y se envía el email, también veras donde ubicamos la funcion de Javascript para evitar el reenvío del formulario cada que refrescas tu pagina web.
Deja una respuesta