FTP | CCD | Buscar | Trucos | Trabajo | Foros |
|
Registrarse | FAQ | Miembros | Calendario | Guía de estilo | Temas de Hoy |
|
Herramientas | Buscar en Tema | Desplegado |
#1
|
||||
|
||||
Formulario de Contacto con Ajax y PHP
Hace apenas unos dias que me estoy metiendo al mundillo de AJAX, lo primero que hice con esta tecnología fué un formulario de contacto el cual creo un buen ejemplo para aprender/comprender el uso de Ajax...
Los archivos con que cuenta este ejemplo son: * index.php * objeto.js * enviar.php Lo primero en este momento será crear el documento principal "index.php" donde se creará el formulario y se hará la llamada al fichero con código JavaScript que se encarga de crear el objeto "XMLHTTP". Código del fichero index.php Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Enviar Correo - Ajax + PHP</title> <script src="objeto.js" /></script> <style type="text/css"> <!-- .main{ border:#999999 1px solid; width:400px; } --> </style> </head> <body> <center> <div id="main" class="main"> <form name="fcontacto"> <table width="100%" border="0" align="center" cellpadding="0" cellspacing="3"> <tr> <td colspan="2"><h3>Formulario de Contacto </h3></td> </tr> <tr> <td width="120" align="right" valign="top"> Nombre:</td> <td><input type="text" name="nombre" /></td> </tr> <tr> <td align="right" valign="top">Correo:</td> <td><input type="text" name="correo" /></td> </tr> <tr> <td align="right" valign="top"> Asunto:</td> <td><input type="text" name="asunto" /></td> </tr> <tr> <td align="right" valign="top"> Mensaje:</td> <td><textarea name="mensaje" cols="25" rows="5"></textarea></td> </tr> <tr> <td align="right"> </td> <td> <input type="button" name="enviar" value="Enviar" onclick="procesar()"/> </td> </tr> </table> </form> </div> </center> </body> </html> Lo siguiente será crear el archivo "objeto.js", este archivo si merece un poco mas de explicación por lo cual lo dividiré en partes y al final mostraré el código completo, además de que al final del docuemento podrás encontrar todos los archivos disponibles para descargar -> [http://dechiqui.com/ejemplos/correo_ajax_php/correo_ajax_php.zip]. El siguiente paso será crear el las funciones Javascript necesarias para hacer la llamada y creación al objeto HMLHTTP: Código del fichero objeto.js Lo primero a hacer será declarar las variables que usaremos en nuestro script: Código:
//Declaración de las variables a utilizar en el siguiente código //[obj] contendrá el objeto XMLHTTP var obj; //[div] Almacenará el id del div en el que se //mostrará el resultado obtenido de la carga del var div; //[pVars] La información contenida en el formulario var pVars; Código:
//Creación de la función [crearObjeto] en la que se encuentra //el procedimiento necesario para crearlo. function crearObjeto() { //Navegadores distintos a IE (Opera, Mozilla ...) if (window.XMLHttpRequest) { //Retorna el valor contenida en este objeto. return new XMLHttpRequest(); //Cuando el explorador es IE } else if (window.ActiveXObject) { //Retorna el valor contenido en este objeto return new ActiveXObject("Microsoft.XMLHTTP"); } } Código:
//La función [Procesar] se encargará de procesar (Valga la redundancia) //la información contenida en el formulario y luego la envia function procesar(){ //Proceso necesario para tomar el valor de los distintos //campos del formulario para luego enviarlos. pVars = '&nombre='+encodeURI(document.fcontacto.nombre.value); pVars = pVars+ '&correo='+encodeURI(document.fcontacto.correo.value); pVars = pVars+ '&asunto='+encodeURI(document.fcontacto.asunto.value); pVars = pVars+ '&mensaje='+encodeURI(document.fcontacto.mensaje.value); //Creación del objeto XMLHTTP //Llamada a la función crearObjeto y tomando su valor de retorno. obj=crearObjeto(); //asigna la función que se ejecutará cada vez que //readyState cambie de valor obj.onreadystatechange = cambio; //Ahora indicamos el archivo al que serán enviado los datos y //el método que será utilizado para el envio de la información obj.open("POST",'enviar.php', true); //Esto será necesario siempre que utilicemos el método "post" //ya que la información deberá ser cidificada para el envio obj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //Y por último solo envías las variables obj.send(pVars); } Lo siguiente será crear la función "cambio" la que es llamada por el objeto "onreadystatechange": function cambio(){ //Asignamos el id de el div en el que se cargarán los datos div = document.getElementById("main"); //Examina si "obj.readystate" sea igual a "4", lo cual indica que //el documento está listo para la carga if(obj.readyState == 4){ //luego agregamos la respuesta al div mediante "innetHTML" div.innerHTML = obj.responseText; //Si "obj.readystatechange" no es igual a "4" } else { //agrega la imagen "loading.gif" que se encuentra en el //mismo directorio. div.innerHTML='<img src="loading.gif" align="middle"/>; } } Y por último, debemos crear el archivo "enviar.php" el cual recibirá los datos y los enviará a nuestro buzón de correo: Código:
< ?php if(@mail('correo@dominio.com', $_POST["asunto"], $_POST["mensaje"], "from:".$_POST["nombre"]."<".$_POST["correo"].">")){ echo'El Correo se ha enviado Correctamente!'; } else { echo'Error!. el correo no se ha podido enviar'; } ?> Pues bien, ahora puedes ver [http://dechiqui.com/ejemplos/correo_ajax_php/] el formulario funcionando o descargar [http://dechiqui.com/ejemplos/correo_ajax_php/correo_ajax_php.zip] los ficheros. ------------- Documento Original: [http://dechiqui.com/blog/index.php?p=25&more=1] Visualización y prueba: http://dechiqui.com/ejemplos/correo_ajax_php/] Descarga de Archivos: [http://dechiqui.com/ejemplos/correo_ajax_php/correo_ajax_php.zip] saludos. |
|
|
|