Cuso jQuery 11: llamada a Ajax, envio formulario

AJAX significa Asynchronous JavaScript and XML, es una tecnología que se utiliza mucho en las páginas web, esta tecnología nos permite conectarnos con el servidor web si tener que recargar la pagina, de forma que se ejecuta un servicio o una pagina web sin necesidad de volver a cargar la web.

Por ejemplo cuando usamos formmail.php se llama a ese archivo y se carga otra página web, con la tecnología AJAX no es necesario volver a cargar la web sino que la ejecución de ese archivo se haría en «segundo plano» sin inteferir en el funcionamiento de la web.

Para ejecutar un comando en AJAX desde jQuery es muy sencillo, la sintasix seria similar a la siguiente:

$.ajax({
	type: //tipo de envio de datos POST o GET
	url: //nombre del fichero a ejecutar
	data: //datos que se le van a enviar al fichero
	success: function(data){
		//funcion que se ejecutara en caso de que todo vaya bien
	},
	error: function(data){
		//funcion que se ejecutara en caso de que se haya producido un fallo
	}
});

Hoy en día podemos encontrar AJAX en cualquier página web, por ejemplo en una tienda online en la que al pinchar en un producto se añade al carrito y la web no se recarga estaría utilizando AJAX.

Vamos a hacer un ejemplo para el envió de un formulario por correo electrónico usando AJAX. Lo primero que vamos a hacer es crearnos un formulario y un div para que nos informe si todo ha ido bien o si se han producido errores.

<style type="text/css">
 .correcto{
 border: 2px green solid;
 }
 .error{
 border: 2px red solid;
 }
 .resultado{
 display:none;
 }
</style>
</head>

<body>
<div class="formulario">
	<form class="datos">
		<p><input type="text" name="nombre" placeholder="Introduce tu nombre"></p>
		<p><input type="text" name="email" placeholder="Introduce tu email"></p>
		<p><textarea name="comentarios" placeholder="Deja tus comentarios" rows="8" cols="40"></textarea></p>
		<input type="button" class="enviar" value="Enviar">
	</form>
</div>
<div class="resultado">
	
</div>

Hemos definido una clase correcto y otra error para que el div resultado cambie dependiendo de lo que haya pasado. A continuación usando jQuery y AJAX llamamos a un archivo que sera enviar.php para el envió de los datos por correo electrónico.

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(e){
		$(".enviar").click(function(e){
			$.ajax({
				type: "POST",
				url: "enviar.php",
				data: $(".datos").serialize(),
				success: function(data){
					$(".formulario").fadeOut(1000,function(){
						$(".resultado").addClass("correcto");
						$(".resultado").html("Se han enviado los datos correctamente, nos pondremos en contacto lo antes posible");
						$(".resultado").fadeIn(500);
					});
				},
				error: function(data){
					$(".formulario").fadeOut(1000,function(){
						$(".resultado").addClass("error");
						$(".resultado").html("No Se han enviado los datos, intentalo mas tarde o envia un correo a info@......");
						$(".resultado").fadeIn(500);
					});
				}
			});
			
			
		});
	});
</script>

Llamamos al archivo enviar y le pasamos los datos del formulario, si todo ha ido bien ocultamos el formulario y mostramos un mensaje ademas de poner la clase correcto al mensaje y si todo ha ido mal ademas de ocultar el formulario y mostrar el mensaje ponemos la clase error al resultado.

Por último tendríamos que crear el archivo enviar.php que sera el encargado de que se envíen los datos por correo.

<?php
	$nombre=$_POST["nombre"];
	$email=$_POST["email"];
	$comentarios=$_POST["comentarios"];

	$destinatario="ghernandeaula5@gmail.com";
	$asunto="Peticion de informacion desde la web";

	$mensaje="Estos son los datos recogidos de la web <br/>";
	$mensaje.="<br/>Nombre: ".$nombre;
	$mensaje.="<br/>Email: ".$email;
	$mensaje.="<br/>Comentarios: ".$comentarios;

	$cabecera="MIME-Version: 1.0\r\n"; 
	$cabecera.="Content-type: text/html;";
	$cabecera.="charset=UTF-8\r\n"; 
	$cabecera.="From: ".$nombre."<".$email.">" . "\r\n";
	$cabecera.="Reply-To: ".$email. "\r\n";
	$cabecera.="X-Mailer: PHP/" . phpversion();
		
	mail($destinatario,$asunto,$mensaje,$cabecera);
?>

El archivo esta hecho para los campos nombre, email y comentarios, si nuestro formulario tuviese mas campos tendríamos que añadirlo de la misma forma que hemos hecho con el nombre el email o los comentarios. Sobra decir que solo funciona en un servidor web real o en un servidor virtual tipo xampp.

Comparte en tus redes sociales