Как отправить письмо из JavaScript

Question

Я хочу, чтобы на моем веб-сайте была возможность отправлять электронные письма без обновления страницы.Поэтому я хочу использовать 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" />

Вот как я хочу вызвать функцию, но я не уверен, что поместить в функцию javascript.Из проведенного мною исследования я нашел пример, в котором используется метод mailto, но, насколько я понимаю, на самом деле он не отправляется напрямую с сайта.

Итак, мой вопрос: где я могу найти, что добавить в функцию JavaScript, чтобы отправить электронное письмо прямо с сайта?

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

Answer 1

Вы не можете отправить электронное письмо напрямую с помощью javascript.

Однако вы можете открыть почтовый клиент пользователя:

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

Существуют также некоторые параметры для предварительного заполнениясубъект и тело:

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

---

Другим решением было бы сделать ajax-вызов на ваш сервер, чтобы сервер отправлял электронную почту.Будьте осторожны, чтобы никому не отправлять письма через ваш сервер.

Answer 2

Непрямой через ваш сервер - Вызов API сторонних производителей - безопасный и рекомендуемый

---

Ваш сервер может вызывать сторонний API после надлежащей аутентификации и авторизации. Ключи API не предоставляются клиенту.

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

});

и затем используйте $ .ajax на клиенте для вызова вашего почтового API.

---

Напрямую от клиента - API-интерфейс вызывающего абонента - не рекомендуется

---

Отправить письмо, используя только JavaScript

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

Вот так -

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

Примечание: имейте в виду, что ваш ключ API виден любому, поэтому любой злоумышленник может использовать ваш ключ для отправки электронных писем, которые могут поглотить вашу квоту.

Answer 3

Я не смог найти ответ, который действительно удовлетворил первоначальный вопрос.

• Mandrill нежелателен из-за его новой ценовой политики, плюс для этого требуется бэкэнд-сервис, если вы хотите сохранить свои учетные данные в безопасности.
• Часто желательно скрыть свою электронную почту, чтобы не попасть в какие-либо списки (решение mailto выявляет эту проблему и неудобно для большинства пользователей).
• Это хлопотночтобы настроить sendMail или вообще потребовать бэкэнд просто для отправки электронного письма.

Я собрал простой бесплатный сервис, который позволяет вам сделать стандартный HTTP-запрос POST для отправки электронного письма.Она называется PostMail , и вы можете просто опубликовать форму, использовать Javascript или jQuery.Когда вы регистрируетесь, он предоставляет вам код, который вы можете скопировать и вставить на свой сайт.Вот несколько примеров:

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>

Опять же, в полном раскрытии, я создал этот сервис, потому что не смог найти подходящийответить.

Answer 4

Вы можете найти, что поместить в функцию 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));
     }
}

Предоставьте свой собственный скрипт PHP (или любой другой язык) для отправки электронной почты.

Answer 5

Я сообщаю вам новости. Вы НЕ МОЖЕТЕ отправить электронное письмо с JavaScript как таковым.

---

Исходя из контекста вопроса ОП, мой ответ выше не соответствует действительности, на что указал @KennyEvitt в комментариях. Похоже, вы можете использовать JavaScript в качестве SMTP-клиента .

Однако , я не стал копать глубже, чтобы выяснить, достаточно ли он безопасен и кроссбраузерен. Поэтому я не могу ни поощрять, ни отговаривать вас использовать это Используйте на свой страх и риск.

Answer 6

Кажется, на горизонте появляется новое решение. Это называется EmailJS . Они утверждают, что серверный код не нужен. Вы можете запросить приглашение.

Обновление: август 2016: EmailJS, похоже, уже запущен. Вы можете отправлять до 200 электронных писем в месяц бесплатно, и он предлагает подписку для больших объемов.

Answer 7

window.open ( 'электронной почты: test@example.com');как и выше, ничего не скрывает спам-боты от адреса электронной почты «test@example.com».Раньше я постоянно сталкивался с этой проблемой.

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

Answer 8

Javascript на стороне клиента, вы не можете писать по электронной почте с помощью Javascript. Браузер распознает, может быть, только mailto: и запускает почтовый клиент по умолчанию.

Answer 9

В вашей функции sendMail() добавьте вызов ajax в бэкэнд, где вы можете реализовать это на стороне сервера.

Answer 10

Я знаю, что уже слишком поздно, чтобы написать ответ на этот вопрос, но, тем не менее, я думаю, что он будет полезен всем, кто думает об отправке электронных писем через javascript.

Первый способ, который я бы предложил, - это использовать обратный вызов для этого на сервере. Если вы действительно хотите, чтобы он обрабатывался с использованием javascript, я рекомендую следующее.

Самым простым способом, который я нашел, было использование smtpJs. Бесплатная библиотека, которую можно использовать для отправки писем.

1.Включите скрипт, как показано ниже

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

2. Вы можете отправить электронное письмо как это

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

Что нежелательно, так как он будет отображать ваш пароль на стороне клиента. Таким образом, вы можете сделать следующее, зашифровав свои учетные данные SMTP и заблокировав их в одном домене, и вместо этого передайте безопасный токен вместо учетных данных.

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

Наконец, если у вас нет SMTP-сервера, вы используете службу SMTP-ретрансляции, такую ​​как Elastic Email

Также здесь есть ссылка на официальный сайт SmtpJS.com , где вы можете найти весь необходимый пример и место, где вы можете создать свой безопасный токен.

Надеюсь, кому-то эта информация окажется полезной. Удачного кодирования.