Come inviare un'e-mail da JavaScript

Voglio che il mio sito Web abbia la possibilità di inviare un'e-mail senza aggiornare la pagina. Quindi voglio usare Javascript.

<form action="javascript:sendMail();" name="pmForm" id="pmForm" method="post">
Enter Friend's Email:
<input name="pmSubject" id="pmSubject" type="text" maxlength="64" style="width:98%;" />
<input name="pmSubmit" type="submit" value="Invite" />

Ecco come desidero chiamare la funzione, ma non sono sicuro di cosa inserire nella funzione JavaScript. Dalla ricerca che ho fatto ho trovato un esempio che utilizza il metodo mailto, ma la mia comprensione è che in realtà non viene inviato direttamente dal sito.

Quindi la mia domanda è dove posso trovare cosa inserire nella funzione JavaScript per inviare un'e-mail direttamente dal sito Web.

function sendMail() {
    /* ...code here...    */
}

Non è possibile inviare un'e-mail direttamente con JavaScript.

Puoi, tuttavia, aprire il client di posta dell'utente:

window.open('mailto:test@example.com');

Ci sono anche alcuni parametri per precompilare il soggetto e il corpo:

window.open('mailto:test@example.com?subject=subject&body=body');

Un'altra soluzione sarebbe quella di effettuare una chiamata Ajax al tuo server, in modo che il server invii l'e-mail. Fai attenzione a non consentire a nessuno di inviare e-mail tramite il tuo server.

Indiretto tramite il tuo server - Chiamata API di terze parti - sicuro e consigliato

Il server può chiamare l'API di terze parti dopo l'autenticazione e l'autorizzazione appropriate. Le chiavi API non sono esposte al client.

node.js - https://www.npmjs.org/package/node-mandrill

var mandrill = require('node-mandrill')('<your API Key>'); 

function sendEmail ( _name, _email, _subject, _message) {
    mandrill('/messages/send', {
        message: {
            to: [{email: _email , name: _name}],
            from_email: 'noreply@yourdomain.com',
            subject: _subject,
            text: _message
        }
    }, function(error, response){
        if (error) console.log( error );
        else console.log(response);
    });
}

// define your own email api which points to your server.

app.post( '/api/sendemail/', function(req, res){

    var _name = req.body.name;
    var _email = req.body.email;
    var _subject = req.body.subject;
    var _messsage = req.body.message;

    //implement your spam protection or checks. 

    sendEmail ( _name, _email, _subject, _message );

});

e quindi usa $ .ajax sul client per chiamare l'API di posta elettronica.

Direttamente dal client: chiamata dell'API di terze parti: non consigliato

Invia un'e-mail utilizzando solo JavaScript

in short: 
1. register for Mandrill to get an API key
2. load jQuery
3. use $.ajax to send an email

Come questo -

function sendMail() {
    $.ajax({
      type: 'POST',
      url: 'https://mandrillapp.com/api/1.0/messages/send.json',
      data: {
        'key': 'YOUR API KEY HERE',
        'message': {
          'from_email': 'YOUR@EMAIL.HERE',
          'to': [
              {
                'email': 'RECIPIENT@EMAIL.HERE',
                'name': 'RECIPIENT NAME (OPTIONAL)',
                'type': 'to'
              }
            ],
          'autotext': 'true',
          'subject': 'YOUR SUBJECT HERE!',
          'html': 'YOUR EMAIL CONTENT HERE! YOU CAN USE HTML!'
        }
      }
     }).done(function(response) {
       console.log(response); // if you're into that sorta thing
     });
}

https://medium.com/design-startups/b53319616782

Nota: tieni presente che la tua chiave API è visibile a chiunque, quindi qualsiasi utente malintenzionato può utilizzare la chiave per inviare e-mail che possono consumare la tua quota.

Non sono riuscito a trovare una risposta che soddisfacesse davvero la domanda originale.

• Mandrill non è desiderabile a causa della sua nuova politica sui prezzi, oltre a richiedere un servizio di back-end se si desidera mantenere al sicuro le proprie credenziali.
• Spesso è preferibile nascondere la tua e-mail in modo da non finire in alcun elenco (la soluzione mailto espone questo problema e non è conveniente per la maggior parte degli utenti).
• È una seccatura configurare sendMail o richiedere un back-end solo per inviare un'e-mail.

Ho messo insieme un semplice servizio gratuito che ti consente di effettuare una richiesta POST HTTP standard per inviare un'e-mail. Si chiama PostMail e puoi semplicemente pubblicare un modulo, utilizzare Javascript o jQuery. Quando ti registri, ti fornisce il codice che puoi copiare e incollare nel tuo sito web. Ecco alcuni esempi:

Javascript:

<form id="javascript_form">
    <input type="text" name="subject" placeholder="Subject" />
    <textarea name="text" placeholder="Message"></textarea>
    <input type="submit" id="js_send" value="Send" />
</form>

<script>

    //update this with your js_form selector
    var form_id_js = "javascript_form";

    var data_js = {
        "access_token": "{your access token}" // sent after you sign up
    };

    function js_onSuccess() {
        // remove this to avoid redirect
        window.location = window.location.pathname + "?message=Email+Successfully+Sent%21&isError=0";
    }

    function js_onError(error) {
        // remove this to avoid redirect
        window.location = window.location.pathname + "?message=Email+could+not+be+sent.&isError=1";
    }

    var sendButton = document.getElementById("js_send");

    function js_send() {
        sendButton.value='Sending…';
        sendButton.disabled=true;
        var request = new XMLHttpRequest();
        request.onreadystatechange = function() {
            if (request.readyState == 4 && request.status == 200) {
                js_onSuccess();
            } else
            if(request.readyState == 4) {
                js_onError(request.response);
            }
        };

        var subject = document.querySelector("#" + form_id_js + " [name='subject']").value;
        var message = document.querySelector("#" + form_id_js + " [name='text']").value;
        data_js['subject'] = subject;
        data_js['text'] = message;
        var params = toParams(data_js);

        request.open("POST", "https://postmail.invotes.com/send", true);
        request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        request.send(params);

        return false;
    }

    sendButton.onclick = js_send;

    function toParams(data_js) {
        var form_data = [];
        for ( var key in data_js ) {
            form_data.push(encodeURIComponent(key) + "=" + encodeURIComponent(data_js[key]));
        }

        return form_data.join("&");
    }

    var js_form = document.getElementById(form_id_js);
    js_form.addEventListener("submit", function (e) {
        e.preventDefault();
    });
</script>

jQuery:

<form id="jquery_form">
    <input type="text" name="subject" placeholder="Subject" />
    <textarea name="text" placeholder="Message" ></textarea>
    <input type="submit" name="send" value="Send" />
</form>

<script>

    //update this with your $form selector
    var form_id = "jquery_form";

    var data = {
        "access_token": "{your access token}" // sent after you sign up
    };

    function onSuccess() {
        // remove this to avoid redirect
        window.location = window.location.pathname + "?message=Email+Successfully+Sent%21&isError=0";
    }

    function onError(error) {
        // remove this to avoid redirect
        window.location = window.location.pathname + "?message=Email+could+not+be+sent.&isError=1";
    }

    var sendButton = $("#" + form_id + " [name='send']");

    function send() {
        sendButton.val('Sending…');
        sendButton.prop('disabled',true);

        var subject = $("#" + form_id + " [name='subject']").val();
        var message = $("#" + form_id + " [name='text']").val();
        data['subject'] = subject;
        data['text'] = message;

        $.post('https://postmail.invotes.com/send',
            data,
            onSuccess
        ).fail(onError);

        return false;
    }

    sendButton.on('click', send);

    var $form = $("#" + form_id);
    $form.submit(function( event ) {
        event.preventDefault();
    });
</script>

Ancora una volta, in piena divulgazione, ho creato questo servizio perché non sono riuscito a trovare una risposta adeguata.

Puoi trovare cosa mettere all'interno della funzione JavaScript in questo post.

function getAjax() {
    try {
        if (window.XMLHttpRequest) {
            return new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            try {
                return new ActiveXObject('Msxml2.XMLHTTP');
            } catch (try_again) {
                return new ActiveXObject('Microsoft.XMLHTTP');
            }
        }
    } catch (fail) {
        return null;
    }
}

function sendMail(to, subject) {
     var rq = getAjax();

     if (rq) {
         // Success; attempt to use an Ajax request to a PHP script to send the e-mail
         try {
             rq.open('GET', 'sendmail.php?to=' + encodeURIComponent(to) + '&subject=' + encodeURIComponent(subject) + '&d=' + new Date().getTime().toString(), true);

             rq.onreadystatechange = function () {
                 if (this.readyState === 4) {
                     if (this.status >= 400) {
                         // The request failed; fall back to e-mail client
                         window.open('mailto:' + to + '?subject=' + encodeURIComponent(subject));
                     }
                 }
             };

             rq.send(null);
         } catch (fail) {
             // Failed to open the request; fall back to e-mail client
             window.open('mailto:' + to + '?subject=' + encodeURIComponent(subject));
         }
     } else {
         // Failed to create the request; fall back to e-mail client
         window.open('mailto:' + to + '?subject=' + encodeURIComponent(subject));
     }
}

Fornisci il tuo script PHP (o qualunque lingua) per inviare l'e-mail.

Ti sto dando le notizie. Non puoi inviare un'e-mail con JavaScript di per sé.

Sulla base del contesto della domanda del PO, la mia risposta sopra non è più vera come sottolineato da @KennyEvitt nei commenti. Sembra che tu possa usare JavaScript come client SMTP .

Tuttavia , non ho scavato più a fondo per scoprire se è abbastanza sicuro e compatibile con più browser. Quindi, non posso né incoraggiarti né scoraggiarti a usarlo. Utilizzare a proprio rischio.

So di essere troppo tardi per scrivere una risposta a questa domanda, ma penso comunque che sarà utile per chiunque stia pensando di inviare e-mail tramite javascript.

Il primo modo che suggerirei è usare un callback per farlo sul server. Se vuoi davvero che sia gestito usando il folowing javascript è quello che consiglio.

Il modo più semplice che ho trovato è stato usare smtpJs. Una libreria gratuita che può essere utilizzata per inviare e-mail.

1. Includi lo script come di seguito

<script src="https://smtpjs.com/v3/smtp.js"></script>

2. Puoi inviare una email come questa

Email.send({
    Host : "smtp.yourisp.com",
    Username : "username",
    Password : "password",
    To : 'them@website.com',
    From : "you@isp.com",
    Subject : "This is the subject",
    Body : "And this is the body"
    }).then(
      message => alert(message)
    );

Il che non è consigliabile in quanto visualizzerà la password sul lato client, quindi puoi fare quanto segue che crittografa le tue credenziali SMTP, lo blocca su un singolo dominio e passa invece un token sicuro invece delle credenziali.

Email.send({
    SecureToken : "C973D7AD-F097-4B95-91F4-40ABC5567812",
    To : 'them@website.com',
    From : "you@isp.com",
    Subject : "This is the subject",
    Body : "And this is the body"
}).then(
  message => alert(message)
);

Infine, se non si dispone di un server SMTP, si utilizza un servizio di inoltro smtp come Elastic Email

Anche qui c'è il link al sito web ufficiale di SmtpJS.com dove puoi trovare tutti gli esempi di cui hai bisogno e il luogo in cui puoi creare il tuo token sicuro.

Spero che qualcuno trovi utili questi dettagli. Buona codifica.

Sembra esserci una nuova soluzione all'orizzonte. Si chiama EmailJS . Sostengono che non è necessario alcun codice server. Puoi richiedere un invito.

Aggiornamento agosto 2016: EmailJS sembra essere già attivo. Puoi inviare gratuitamente fino a 200 e-mail al mese e offre abbonamenti per volumi più elevati.

window.open ( 'mailto: test@example.com'); come sopra non fa nulla per nascondere l'indirizzo e-mail "test@example.com" dall'essere raccolto dagli spambots. Mi imbattevo costantemente in questo problema.

var recipient="test";
var at = String.fromCharCode(64);
var dotcom="example.com";
var mail="mailto:";
window.open(mail+recipient+at+dotcom);

Javascript è lato client, non puoi inviare email con Javascript. Il browser riconosce forse solo mailto:e avvia il client di posta predefinito.

Nella tua sendMail()funzione, aggiungi una chiamata Ajax al tuo back-end, dove puoi implementarlo sul lato server.

JavaScript non può inviare e-mail da un browser web. Tuttavia, uscendo dalla soluzione che hai già provato a implementare, puoi fare qualcosa che soddisfa il requisito originale:

invia un'e-mail senza aggiornare la pagina

È possibile utilizzare JavaScript per costruire i valori necessari per l'e-mail e quindi effettuare una richiesta AJAX a una risorsa del server che effettivamente invia l'e-mail. (Non so quali lingue / tecnologie lato server stai usando, quindi quella parte dipende da te.)

Se non hai familiarità con AJAX, una rapida ricerca su Google ti fornirà molte informazioni. Generalmente puoi farlo funzionare rapidamente con la funzione $ .ajax () di jQuery. Devi solo avere una pagina sul server che può essere chiamata nella richiesta.

Sembra che una 'risposta' a questa sia implementare un client SMPT. Vedi email.js per una libreria JavaScript con un client SMTP.

Ecco il repository GitHub per il client SMTP. Sulla base del README del repository, sembra che possano essere necessari vari spessori o polyfill a seconda del browser del client, ma nel complesso sembra certamente fattibile (se non effettivamente realizzato in modo significativo), anche se non in un modo che è facilmente descrivibile anche da un ragionevole- lunga risposta qui.

C'è un servizio combinato. È possibile combinare le soluzioni sopra elencate come mandrill con un servizio EmailJS, che può rendere il sistema più sicuro. Tuttavia, non hanno ancora avviato il servizio.

Un altro modo per inviare e-mail da JavaScript è utilizzare directtomx.com come segue;

 Email = {
 Send : function (to,from,subject,body,apikey)
    {
        if (apikey == undefined)
        {
            apikey = Email.apikey;
        }
        var nocache= Math.floor((Math.random() * 1000000) + 1);
        var strUrl = "http://directtomx.azurewebsites.net/mx.asmx/Send?";
        strUrl += "apikey=" + apikey;
        strUrl += "&from=" + from;
        strUrl += "&to=" + to;
        strUrl += "&subject=" + encodeURIComponent(subject);
        strUrl += "&body=" + encodeURIComponent(body);
        strUrl += "&cachebuster=" + nocache;
        Email.addScript(strUrl);
    },
    apikey : "",
    addScript : function(src){
            var s = document.createElement( 'link' );
            s.setAttribute( 'rel', 'stylesheet' );
            s.setAttribute( 'type', 'text/xml' );
            s.setAttribute( 'href', src);
            document.body.appendChild( s );
    }
};

Quindi chiamalo dalla tua pagina come segue;

 window.onload = function(){
    Email.apikey = "-- Your api key ---";
    Email.Send("to@domain.com","from@domain.com","Sent","Worked!");
 }

Lo farei con la libreria SMTPJs . Offre la crittografia delle tue credenziali come nome utente, password ecc.

Non esiste una risposta diretta alla tua domanda in quanto non possiamo inviare e-mail solo tramite javascript, ma ci sono modi per utilizzare javascript per inviare e-mail per noi:

1) utilizzando un API per e chiamare l'API tramite javascript per inviare l'e-mail per noi, ad esempio https://www.emailjs.com afferma che è possibile utilizzare un codice simile di seguito per chiamare il loro API dopo alcune impostazioni:

var service_id = 'my_mandrill';
var template_id = 'feedback';
var template_params = {
name: 'John',
reply_email: 'john@doe.com',
message: 'This is awesome!'
};

emailjs.send(service_id,template_id,template_params);

2) crea un codice di backend per inviare una email per te, puoi usare qualsiasi framework di backend per farlo per te.

3) usando qualcosa come:

window.open('mailto:me@http://stackoverflow.com/');

che aprirà la tua applicazione di posta elettronica, questo potrebbe entrare nel popup bloccato nel tuo browser.

In generale, l'invio di un'e-mail è un'attività del server, quindi dovrebbe essere fatto in lingue back-end, ma possiamo usare javascript per raccogliere i dati necessari e inviarli al server o API, inoltre possiamo usare l'applicazione di terze parti e aprirli tramite il browser utilizzando JavaScript come menzionato sopra.

La risposta breve è che non puoi farlo usando solo JavaScript. Avresti bisogno di un gestore lato server per connetterti al server SMTP per inviare effettivamente la posta. Esistono molti semplici script di posta online, come questo per PHP:

Usa Ajax per inviare richieste allo script PHP, controlla che i campi obbligatori non siano vuoti o errati usando js inoltre conserva un registro della posta inviata da chi dal tuo server.

function sendMail() is good for doing that.

Controlla eventuali errori rilevati durante l'invio dal tuo script e intraprendi le azioni appropriate.
Per risolverlo, ad esempio, se l'indirizzo e-mail non è corretto o la posta non viene inviata a causa di un problema del server o è in coda in tale condizione, segnalarla immediatamente all'utente e impedire l'invio multiplo della stessa e-mail ancora e ancora. Ottieni risposta dal tuo script usando jQuery GET e POST

$ .Get (URL, callback); $ .Post (URL, callback);

Dal momento che queste sono tutte informazioni meravigliose, c'è una piccola API chiamata Mandrill per inviare mail da JavaScript e funziona perfettamente. Puoi provarci. Ecco un piccolo tutorial per iniziare.

Invia un'e-mail utilizzando JavaScript o jQuery

var ConvertedFileStream;
var g_recipient;
var g_subject;
var g_body;
var g_attachmentname;


function SendMailItem(p_recipient, p_subject, p_body, p_file, p_attachmentname, progressSymbol) {

    // Email address of the recipient 
    g_recipient = p_recipient;

   // Subject line of an email
    g_subject = p_subject;

   // Body description of an email
    g_body = p_body;

    // attachments of an email
    g_attachmentname = p_attachmentname;

    SendC360Email(g_recipient, g_subject, g_body, g_attachmentname);

}

function SendC360Email(g_recipient, g_subject, g_body, g_attachmentname) {
    var flag = confirm('Would you like continue with email');
    if (flag == true) {

        try {
            //p_file = g_attachmentname;
            //var FileExtension = p_file.substring(p_file.lastIndexOf(".") + 1);
           // FileExtension = FileExtension.toUpperCase();
            //alert(FileExtension);
            SendMailHere = true;

            //if (FileExtension != "PDF") {

            //    if (confirm('Convert to PDF?')) {
            //        SendMailHere = false;                    
            //    }

            //}
            if (SendMailHere) {
                var objO = new ActiveXObject('Outlook.Application');

                var objNS = objO.GetNameSpace('MAPI');

                var mItm = objO.CreateItem(0);

                if (g_recipient.length > 0) {
                    mItm.To = g_recipient;
                }

                mItm.Subject = g_subject;

                // if there is only one attachment                 
                // p_file = g_attachmentname;
                // mAts.add(p_file, 1, g_body.length + 1, g_attachmentname);

                // If there are multiple attachment files
                //Split the  files names
                var arrFileName = g_attachmentname.split(";");
                 // alert(g_attachmentname);
                //alert(arrFileName.length);
                var mAts = mItm.Attachments;

                for (var i = 0; i < arrFileName.length; i++)
                {
                    //alert(arrFileName[i]);
                    p_file = arrFileName[i];
                    if (p_file.length > 0)
                    {                     
                        //mAts.add(p_file, 1, g_body.length + 1, g_attachmentname);
                        mAts.add(p_file, i, g_body.length + 1, p_file);

                    }
                }

                mItm.Display();

                mItm.Body = g_body;

                mItm.GetInspector.WindowState = 2;

            }
            //hideProgressDiv();

        } catch (e) {
            //debugger;
            //hideProgressDiv();
            alert('Unable to send email.  Please check the following: \n' +
                    '1. Microsoft Outlook is installed.\n' +
                    '2. In IE the SharePoint Site is trusted.\n' +
                    '3. In IE the setting for Initialize and Script ActiveX controls not marked as safe is Enabled in the Trusted zone.');
        }
    }
  }