Enviar mail usando PHP y AJAX
En esta oportunidad veremos como enviar e-mails haciendo uso de PHP + AJAX de manera sencilla y práctica.
Empezemos entonces diseñando nuestro formulario de envio de mails. Este formulario tendrá el nombre enviar_mail, y en el evento onsubmit colocaremos el nombre de la función enviarMail() de la cual hablaremos mas adelante. Además definiremos 3 campos: el destinatario, el remitente y el mensaje. Al final colocaremos una capa para mostrar el mensaje de enviado. A continuación el código:
index.php
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Enviar E-mail AJAX+PHP</title> <script language="JavaScript" type="text/javascript" src="ajax.js"></script> </head> <body> <form onsubmit="enviarMail(); return false" name="enviar_email" action=""> <p>E-mail de tu amigo</p> <p> <input size="30" type="text" name="email_destino" /> </p> <p>Tu nombre </p> <p> <input size="30" type="text" name="emisor" /> </p> <p>Mensaje a enviar</p> <p> <textarea name="mensaje" cols="45%" rows="2" ></textarea> </p> <p> <input type="submit" value="Enviar" /> </p> </form> <div id="resultado_mensaje" style="width:300px; height:30px; border:1px solid gray;">Resultado aqui.</div> </body> </html>
Bien, ahora definamos las funciones en javascript que realizarán la petición al servidor. Definamos: la función nuevoAjax(), la cual se encargará de crear el objeto XMLHttpRequest dependiendo del navegador web (es algo que hemos visto en artículos anteriores); ahora la funcion enviarMail(), de la cual hablamos antes, está se encargará de enviar las variables del formulario al script PHP envia_mail.php que realizará el proceso de enviar el mail; y finalmente escribiremos la función borrarCampos(), la cual borra los 3 campos cuando el mail ha sido enviado. El código queda así:
ajax.js
function nuevoAjax(){
var xmlhttp=false;
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(E){
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function enviarMail(){
c = document.getElementById('resultado_mensaje');
//variable=documenet.nombre_del_form.nombre_del_control.value
emis=document.enviar_email.emisor.value;
dest=document.enviar_email.email_destino.value;
men=document.enviar_email.mensaje.value;
ajax=nuevoAjax();
c.innerHTML = '<p style="text-align:center;"><img src="esperando.gif"/></p>';
ajax.open("POST", "envia_mail.php",true);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
c.innerHTML = ajax.responseText
}
borrarCampos()
}
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send("destinatario="+dest+"&emisor="+emis+"&mensaje="+men)
}
function borrarCampos(){
document.enviar_email.emisor.value="";
document.enviar_email.email_destino.value="";
document.enviar_email.mensaje.value="";
document.enviar_email.email_destino.focus();
}
Finalmente, codificamos el script PHP que realizara el envio del mail. Para ello recibimos todas las variables que la función javascript enviarMail() nos envió, y hacemos uso de la instrucción mail de PHP, cuyos parametros son: destinatario, tema, texto del mensaje e información adicional de cabecera. El código queda así:
envia_mail.php
<?php $emisor=$_POST['emisor']; $destinatario=$_POST['destinatario']; $mensaje=$_POST['mensaje']; //Estoy recibiendo el formulario, compongo el cuerpo $cuerpo = "<h1>Un mensaje para ti</h1>"; $cuerpo .= "<p>Tu amigo " . $emisor . ", te envia este mensaje.</p>"; $cuerpo .= "<p>Tu email: " . $destinatario . "</p>"; $cuerpo = $cuerpo.$mensaje; //mando el correo... mail($destinatario,"Mensaje de un amigo",$cuerpo,"MIME-Version: 1.0nContent-type: text/html; charset=UTF-8nFrom: ".$emisor." < http://www.miweb.com >"); //doy las gracias por el envio echo "<div style="background-color:green;color:white;padding:4px;text-align:center;">Gracias por rellenar el formulario. Se ha enviado correctamente. Enviale a otros contactos</div>"; ?>
Como verán, el desarrollo es relativamente sencillo y no requiere mucho código. Sin embargo se le puede agregar algunas características como: trabajar con cookies para evitar correos continuos, validar los correos antes de enviarlos, etc. Descargar el código.
Comentarios
Parse error: syntax error, unexpected T_STRING, expecting ',' or ';' in C:\AppServ\www\ajax_3_actualizacion\envia_mail.php on line 13
echo "<div style="background-color:green;color:white;padding:4px;text-align:center;">Gracias por rellenar el formulario. Se ha enviado correctamente. Enviale a otros contactos</div>";
?>
Warning: mail() [function.mail]: SMTP server response: 550 <//www.miweb.com@gmail.com>, Sender unknown in C:\AppServ\www\ajax_3_actualizacion\envia_mail.php on line 15
Gracias!!!!
Me gusto mucho tu ejemplo, me funciona muy bien. ¿Tendrás un ejemplo de una hoja de contacto conservando la funcionalidad de que cargue la respuesta de envio en la misma pagina?
De antemano mil gracias
Apache/2.0.63 (FreeBSD) DAV/2 mod_fastcgi/2.4.6 PHP/5.2.8 with Suhosin-Patch mod_ssl/2.0.63 OpenSSL/0.9.7e-p1 Server at www.bloomestudio.com Port 80
Warning: mail() [function.mail]: Failed to connect to mailserver at "localhost" port 25, verify your "SMTP" and "smtp_port" setting in php.ini or use ini_set() in C:\wamp\www\Proyect\envia_mail.php on line 15
no se q hacer para esto
Creo que te haz olvidado de colocar punto y coma ";" para cerrar una linea de código en PHP.
Salu2
Parse error: parse error, unexpected T_STRING, expecting ',' or ';' in c:\appserv\www\enviar\envia_mail.php on line 13
estoy usando el appserv 2.5 como servidor local de prueba me gustaria que me agregues al msn para poder consultar contigo algunas dudas
libra_coar@hotmail.com
Dejar un comentario