[SOLUCIONADO] Mensaje de exito al procesar datos

[VolKe]

Hola chicos que tal, queria saber si hay una manera de hacer que un link que envia datos de la pagina 1 a la pagina 2 me muestre un mensaje de "envio exitoso" en la misma pagina.

Osea que el mensaje solo debe aparecer en la pagina 1, que al darle click al link, me muestre el mensaje "envio exitoso" y que por detras se envie los datos sin que se vean claro.
No se si me entendieron pero por ahi es la cosa jaja.

No estoy pidiendo codigo ni nada pero si me pueden ayudar aunque sea diciendome si se hace en ajax o con javascript o como el nombre de ese efecto me seria de gran ayuda.
Gracias

[xerifandtomas]

La solución es ajax.

[rodocoyote15]

Con ajax. En la funcion ajax existe algo conocido como "success", aquí puedes incluir lo que quieres mostrar después de que la petición haya sido completada :)

[Alexis88]

Una petición asíncrona (AJAX) es lo único que necesitas.

Código Javascript:

document.addEventListener("DOMContentLoaded", function(){ //DOM cargado
    document.querySelector("#id del enlace").addEventListener("click", function(event){
        event.preventDefault();
        var ajax = new XMLHttpRequest();
        ajax.open("GET", this.href, true);
        ajax.send();
        ajax.addEventListener("load", function(){
            if (this.status == 200){
                alert("Envío exitoso");
            }
        }, false);
    }, false);
}, false);
 

Como la acción natural de un enlace es la de redirigir luego de darle un clic, tienes que cancelar el evento utilizando el método .preventDefault(); luego, instancias al objeto XMLHttpRequest para realizar la petición, pasándole a su método .open() el método de envío que en este caso será GET pues es el que utilizan los enlaces, la ruta de destino que debe contener el dato a enviar mediante una cadena de consulta, algo como destino.php?variable=valor y el parámetro true para indicar que será una petición asíncrona. Si la ruta de destino no contiene al dato a enviar, tendrás que hacerlo mediante el método .send() de la forma ajax.send("variable=valor"), pero si la ruta de destino contiene al dato a enviar, no será necesario que le asignes un argumento al método, quedando tal y como aparece en el código de ejemplo.

Finalmente, cuando se complete la petición (evento load), necesitas verificar si el estado de la respuesta de la petición fue exitoso, algo que se comprueba cuando la propiedad status del objeto XMLHttpRequest posee el código 200. Si esta condición se cumple, sabremos que la petición finalizó de forma exitosa y procedemos a mostrar el respectivo mensaje al usuario.

Un saludo

[VolKe]

Gracias alexis88 no sabia de esa petición asíncrona, funciona de maravillas. Una consulta, hay algun framework o algo para modificar ese alert. osea cambiarlo por un div al centro de la pagina o simplemente ponerle color al alert.
Gracias

[Alexis88]

En lugar del mensaje de alerta, utiliza un <div> que centrarás con CSS y le asignarás la respuesta de la petición como contenido. Puedes usar un segundo <div> como fondo para darle una mejor presentación. Los <div> estarían inicialmente ocultos y cuando recibas la respuesta, los haces visibles y le asignas la respuesta al <div> que irá al frente.

Un saludo