paolo@bimodesign.com | +34 608 61 64 10

JS / Ajax / Jquery / Json

        

Ajax - Invio E-Mail

Come anticipato nella premessa, con questo semplice esempio vi spiego come inviare una mail con Ajax, mostrando una barra di attesa fino a quando la mail non e' stata inviata.

Innanzitutto nella form di invio, dove queste sono le parti principali. Il resto del codice lo lascio a voi

// Includere il file javascript
<script language="JavaScript" type="text/javascript" src="ajax_email.js"> </script>
...
// includere la chiamata alla funzione
<form onsubmit="enviarMail(); return false" name="enviar_email" action="">
...

Quindi creiamo il file

envia_mail.php

che richiameremo poi da Ajax.

Prende le variabili passate in _POST dalla form, costruisce la mail (header, corpo, destinatario, etcc...) e chiama la funzione mail. Attenzione la funzione e' gia' installata su sistemi Unix/Linux.

Scrive un messaggio di ringraziamento.

Questo il codice

	$emisor=$_POST['emisor'];
	$destinatario=$_POST['destinatario'];
	$mensaje=$_POST['mensaje'];
	$cuerpo = "<h1>Messaggio di un amico</h1>";
	$cuerpo .= "<p>Il tuo amico " . $emisor . ", ti invia questo messaggio.</p>";
	$cuerpo .= "<p>La tua mail: " . $destinatario . "</p>";
	$cuerpo = $cuerpo.$mensaje;
	mail($destinatario,"Messaggio di un amico",$cuerpo,"MIME-Version: 1.0nContent-type: text/html; charset=UTF-8nFrom: ".$emisor." <http://www.bimodesing.com >");
	//doy las gracias por el envio
	echo "<div style="background-color:green;color:white;padding:4px;text-align:center;">Grazie per aver completato il formulario. </div>";

Infine creiamo il file ajax_emai.js javascript con il codice Ajax.

La funzione principale e' enviarMail che, dopo aver settato i valori prelevati dal form richiama in

POST

il file

envia_mail.php

, che li cattura e se il risultato e' positivo cancella i dati della form.

Durante l'invio viene mostrata una immagine animata, sostituita alla fine dal messaggio finale.

Questo il codice, dove ho inserito alcuni commenti, in modo da rendere piu' chiara la descrizione precedente.

// Il settagglio iniziale di Ajax
// ...non ha bisogno di spiegazioni ;)

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;
}

// Funzione principale

function enviarMail(){
       // salvo i valore del div
       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;

       // Inizializzazione di Ajax
       ajax=nuevoAjax();

       // Il messaggio temporaneo. In realta' una immagine animata
       c.innerHTML = '

'; // Chiamata, in POS, al file che si occupa di inviare le mail ajax.open("POST", "envia_mail.php",true); // Controllo del ritorno e cattura del messaggio // In caso positivo, vengono cancellati i valori inseriti nella form. 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) } // Funzione per cancellare gli input della form // Anche questa non ha bisogno di spiegazione ;) function borrarCampos(){ document.enviar_email.emisor.value=""; document.enviar_email.email_destino.value=""; document.enviar_email.mensaje.value=""; document.enviar_email.email_destino.focus(); }