Jak wysłać wiadomość e-mail z JavaScript

Chcę, aby moja witryna mogła wysyłać wiadomości e-mail bez odświeżania strony. Więc chcę użyć 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" />

Oto jak chcę wywołać tę funkcję, ale nie jestem pewien, co wstawić do funkcji javascript. Z przeprowadzonych przeze mnie badań znalazłem przykład wykorzystujący metodę mailto, ale rozumiem, że tak naprawdę nie wysyłam bezpośrednio ze strony.

Więc moje pytanie brzmi: gdzie mogę znaleźć, co należy umieścić w funkcji JavaScript, aby wysłać wiadomość e-mail bezpośrednio ze strony internetowej.

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

Nie można wysłać wiadomości e-mail bezpośrednio za pomocą javascript.

Możesz jednak otworzyć klienta poczty użytkownika:

window.open('mailto:[email protected]');

Istnieją również pewne parametry do wstępnego wypełnienia tematu i ciała:

window.open('mailto:[email protected]?subject=subject&body=body');

Innym rozwiązaniem byłoby wykonanie wywołania ajax na serwerze, aby serwer wysłał wiadomość e-mail. Uważaj, aby nikt nie wysyłał wiadomości e-mail za pośrednictwem Twojego serwera.

Pośrednio za pośrednictwem serwera - wywoływanie interfejsu API innej firmy - bezpieczne i zalecane

Twój serwer może wywołać interfejs API strony trzeciej po odpowiednim uwierzytelnieniu i autoryzacji. Klucze API nie są udostępniane klientowi.

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: '[email protected]',
            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 );

});

a następnie użyj use $ .ajax na kliencie, aby zadzwonić do twojego API e-mail.

Bezpośrednio od klienta - wywołanie interfejsu API strony trzeciej - niezalecane

Wyślij e-mail używając tylko JavaScript

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

Lubię to -

function sendMail() {
    $.ajax({
      type: 'POST',
      url: 'https://mandrillapp.com/api/1.0/messages/send.json',
      data: {
        'key': 'YOUR API KEY HERE',
        'message': {
          'from_email': '[email protected]',
          'to': [
              {
                'email': '[email protected]',
                '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

Uwaga: pamiętaj, że Twój klucz API jest widoczny dla każdego, więc każdy złośliwy użytkownik może użyć tego klucza do wysyłania wiadomości e-mail, które mogą pochłonąć Twój przydział.

Nie mogłem znaleźć odpowiedzi, która naprawdę odpowiadałaby pierwotnemu pytaniu.

• Mandryl nie jest pożądany ze względu na nową politykę cenową, a także wymagał usługi zaplecza, jeśli chcesz zachować swoje dane uwierzytelniające.
• Często lepiej jest ukryć swój e-mail, abyś nie znalazł się na żadnej liście (rozwiązanie mailto ujawnia ten problem i nie jest wygodne dla większości użytkowników).
• Konfiguracja sendMail jest trudna lub w ogóle wymaga zaplecza, aby wysłać wiadomość e-mail.

Złożyłem prostą bezpłatną usługę, która umożliwia standardowe żądanie POST HTTP w celu wysłania wiadomości e-mail. Nazywa się PostMail i możesz po prostu opublikować formularz, użyć Javascript lub jQuery. Podczas rejestracji zapewnia kod, który można skopiować i wkleić na swojej stronie internetowej. Oto kilka przykładów:

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>

Ponownie, w pełnym ujawnieniu, stworzyłem tę usługę, ponieważ nie mogłem znaleźć odpowiedniej odpowiedzi.

W tym poście możesz znaleźć, co należy umieścić w funkcji JavaScript.

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

Podaj własny skrypt PHP (lub inny język), aby wysłać wiadomość e-mail.

Przekazuję ci wiadomości. NIE MOŻESZ wysłać e-maila z JavaScript jako takiego.

W oparciu o kontekst pytania PO, moja powyższa odpowiedź nie jest już prawdą, jak wskazał @KennyEvitt w komentarzach. Wygląda na to, że możesz używać JavaScript jako klienta SMTP .

Jednak nie kopałem głębiej, aby dowiedzieć się, czy jest wystarczająco bezpieczny i kompatybilny z wieloma przeglądarkami. Dlatego nie mogę ani zachęcać, ani zniechęcać do korzystania z niego. Używaj na własne ryzyko.

Wiem, że jestem o wiele za późno, aby napisać odpowiedź na to pytanie, ale myślę, że przyda się to każdemu, kto myśli o wysyłaniu wiadomości e-mail za pomocą javascript.

Pierwszy sposób, który sugerowałbym, to skorzystanie z wywołania zwrotnego, aby to zrobić na serwerze. Jeśli naprawdę chcesz, aby to było obsługiwane przy użyciu javascript, zalecamy to.

Najłatwiej znalazłem użycie smtpJs. Darmowa biblioteka, z której można wysyłać wiadomości e-mail.

1. Dołącz skrypt jak poniżej

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

2. Możesz albo wysłać taki e-mail

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

Nie jest to wskazane, ponieważ wyświetli Twoje hasło po stronie klienta. Możesz więc wykonać następujące czynności, które szyfrują dane uwierzytelniające SMTP i zablokują je w jednej domenie, a zamiast nich przekażą bezpieczny token.

Email.send({
    SecureToken : "C973D7AD-F097-4B95-91F4-40ABC5567812",
    To : '[email protected]',
    From : "[email protected]",
    Subject : "This is the subject",
    Body : "And this is the body"
}).then(
  message => alert(message)
);

Wreszcie, jeśli nie masz serwera SMTP, korzystasz z usługi przekazywania SMTP, takiej jak Elastic Email

Również tutaj jest link do oficjalnej strony SmtpJS.com, gdzie można znaleźć wszystkie potrzebne przykłady i miejsce, w którym można utworzyć bezpieczny token.

Mam nadzieję, że ktoś uzna te szczegóły za przydatne. Szczęśliwego kodowania.

Wydaje się, że na horyzoncie pojawia się nowe rozwiązanie. To się nazywa EmailJS . Twierdzą, że nie jest potrzebny kod serwera. Możesz poprosić o zaproszenie.

Aktualizacja sierpień 2016: Wydaje się, że EmailJS już działa. Możesz wysyłać do 200 e-maili miesięcznie za darmo i oferuje subskrypcje na większe ilości.

window.open („mailto: [email protected]”); jak wyżej nie robi nic, aby ukryć adres e-mail „[email protected]” przed zbieraniem przez robotów spamujących. Kiedyś ciągle napotykałem ten problem.

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

JavaScript jest po stronie klienta, nie można wysyłać wiadomości e-mail za pomocą Javascript. Przeglądarka rozpoznaje może tylko mailto:i uruchamia domyślnego klienta poczty.

W swojej sendMail()funkcji dodaj wywołanie ajax do swojego backendu, gdzie możesz to zaimplementować po stronie serwera.

JavaScript nie może wysyłać wiadomości e-mail z przeglądarki internetowej. Jednak wycofując się z rozwiązania, które już próbowałeś wdrożyć, możesz zrobić coś, co spełnia pierwotne wymagania:

wysłać wiadomość e-mail bez odświeżania strony

Za pomocą JavaScript można skonstruować wartości, których będzie potrzebować e-mail, a następnie wysłać żądanie AJAX do zasobu serwera, który faktycznie wysyła wiadomość e-mail. (Nie wiem, jakich języków / technologii używasz po stronie serwera, więc ta część zależy od Ciebie.)

Jeśli nie znasz AJAX, szybkie wyszukiwanie w Google dostarczy Ci wielu informacji. Zasadniczo można go szybko uruchomić dzięki funkcji $ .ajax () jQuery. Musisz tylko mieć stronę na serwerze, którą można wywołać w żądaniu.

Wydaje się, że jedną „odpowiedzią” na to jest wdrożenie klienta SMPT. Zobacz email.js, aby uzyskać bibliotekę JavaScript z klientem SMTP.

Oto repozytorium GitHub dla klienta SMTP. W oparciu o README repozytorium wydaje się, że w zależności od przeglądarki klienta mogą być wymagane różne podkładki dystansowe lub wieloukładowe, ale ogólnie rzecz biorąc wydaje się to wykonalne (jeśli w rzeczywistości nie osiągnięte w znacznym stopniu), jednak nie w sposób, który można łatwo opisać nawet w uzasadniony sposób - długa odpowiedź tutaj.

Istnieje usługa łączona. Możesz połączyć wyżej wymienione rozwiązania, takie jak mandrill, z usługą EmailJS, co może zwiększyć bezpieczeństwo systemu. Jednak jeszcze nie uruchomili usługi.

Innym sposobem wysyłania wiadomości e-mail z JavaScript jest użycie directtomx.com w następujący sposób;

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

Następnie wywołaj go ze swojej strony w następujący sposób;

 window.onload = function(){
    Email.apikey = "-- Your api key ---";
    Email.Send("[email protected]","[email protected]","Sent","Worked!");
 }

Zrobiłbym to z biblioteką SMTPJ, która oferuje szyfrowanie twoich danych uwierzytelniających, takich jak nazwa użytkownika, hasło itp.

Nie ma prostej odpowiedzi na twoje pytanie, ponieważ nie możemy wysyłać wiadomości e-mail tylko za pomocą javascript, ale istnieją sposoby na użycie javascript do wysyłania e-maili dla nas:

1) korzystanie z interfejsu API i wywoływanie interfejsu API za pomocą javascript w celu wysłania do nas wiadomości e-mail, na przykład https://www.emailjs.com mówi, że możesz użyć takiego kodu poniżej, aby wywołać ich interfejs po pewnych ustawieniach:

var service_id = 'my_mandrill';
var template_id = 'feedback';
var template_params = {
name: 'John',
reply_email: '[email protected]',
message: 'This is awesome!'
};

emailjs.send(service_id,template_id,template_params);

2) utwórz kod zaplecza, aby wysłać wiadomość e-mail, możesz użyć dowolnej struktury zaplecza, aby to zrobić za Ciebie.

3) używając czegoś takiego:

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

który otworzy twoją aplikację e-mail, może to spowodować zablokowanie wyskakującego okienka w przeglądarce.

Ogólnie rzecz biorąc, wysyłanie wiadomości e-mail jest zadaniem serwera, więc powinno się to odbywać w językach zaplecza, ale możemy używać javascript do zbierania potrzebnych danych i wysyłania ich na serwer lub interfejs API, możemy również użyć aplikacji trzeciej parytetu i otworzyć je za pomocą przeglądarki przy użyciu javascript, jak wspomniano powyżej.

Krótka odpowiedź jest taka, że ​​nie można tego zrobić przy użyciu samego JavaScript. Będziesz potrzebował modułu obsługi po stronie serwera, aby połączyć się z serwerem SMTP, aby faktycznie wysłać pocztę. Istnieje wiele prostych skryptów pocztowych online, takich jak ten dla PHP:

Użyj Ajaxa, aby wysłać żądanie do skryptu PHP, sprawdź, czy wymagane pole nie jest puste lub niepoprawne, używając js również przechowuj pocztę wysyłaną przez kogo z twojego serwera.

function sendMail() is good for doing that.

Sprawdź, czy nie wystąpił błąd podczas wysyłania wiadomości ze skryptu i podejmij odpowiednie działania.
Aby rozwiązać ten problem, na przykład, jeśli adres e-mail jest niepoprawny lub wiadomość nie została wysłana z powodu problemu z serwerem lub jest w kolejce w takim stanie, natychmiast zgłoś to użytkownikowi i zapobiegaj wielokrotnemu wysyłaniu tej samej wiadomości e-mail. Uzyskaj odpowiedź ze skryptu Używając jQuery GET i POST

$ .get (URL, oddzwanianie); $ .post (URL, oddzwanianie);

Ponieważ są to wspaniałe informacje, nazywa się mały interfejs API Mandrill do wysyłania wiadomości e-mail z javascript i działa idealnie. Możesz spróbować. Oto mały poradnik na początek.

Wyślij wiadomość e-mail za pomocą JavaScript lub 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.');
        }
    }
  }