我希望我的网站有能力发送电子邮件而不刷新页面。我想用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...    */
}

当前回答

间接通过您的服务器-调用第三方API -安全的,推荐


你的服务器可以调用第三方API。API密钥不会公开给客户端。

node . js

const axios = require('axios');

async function sendEmail(name, email, subject, message) {
  const data = JSON.stringify({
    "Messages": [{
      "From": {"Email": "<YOUR EMAIL>", "Name": "<YOUR NAME>"},
      "To": [{"Email": email, "Name": name}],
      "Subject": subject,
      "TextPart": message
    }]
  });

  const config = {
    method: 'post',
    url: 'https://api.mailjet.com/v3.1/send',
    data: data,
    headers: {'Content-Type': 'application/json'},
    auth: {username: '<API Key>', password: '<Secret Key>'},
  };

  return axios(config)
    .then(function (response) {
      console.log(JSON.stringify(response.data));
    })
    .catch(function (error) {
      console.log(error);
    });

}

// define your own email api which points to your server.
app.post('/api/sendemail/', function (req, res) {
  const {name, email, subject, message} = req.body;
  //implement your spam protection or checks.
  sendEmail(name, email, subject, message);
});

然后在客户端使用use fetch调用你的电子邮件API。 使用您在Mailjet上注册时使用的电子邮件。您还可以验证更多的地址。Mailjet提供了一个慷慨的免费等级。


2023年更新:正如评论中指出的那样,由于CORS,下面的方法不再有效

只有当您想测试发送电子邮件并执行此操作时,这才有用

访问https://api.mailjet.com/stats(是的,404页面) 并在浏览器控制台中运行这段代码(填充秘密)

直接从客户端-调用第三方API -不推荐


简而言之:

注册Mailjet以获得API密钥和Secret 使用fetch调用API发送电子邮件

像这样——

function sendMail(name, email, subject, message) {
  const myHeaders = new Headers();
  myHeaders.append("Content-Type", "application/json");
  myHeaders.set('Authorization', 'Basic ' + btoa('<API Key>'+":" +'<Secret Key>'));

  const data = JSON.stringify({
    "Messages": [{
      "From": {"Email": "<YOUR EMAIL>", "Name": "<YOUR NAME>"},
      "To": [{"Email": email, "Name": name}],
      "Subject": subject,
      "TextPart": message
    }]
  });

  const requestOptions = {
    method: 'POST',
    headers: myHeaders,
    body: data,
  };

  fetch("https://api.mailjet.com/v3.1/send", requestOptions)
    .then(response => response.text())
    .then(result => console.log(result))
    .catch(error => console.log('error', error));
}

sendMail('Test Name',"<YOUR EMAIL>",'Test Subject','Test Message')

注意:请记住,您的API密钥对任何人都是可见的,因此任何恶意用户都可能使用您的密钥发送电子邮件,从而耗尽您的配额。

其他回答

似乎有一个新的解决办法即将出现。它叫EmailJS。他们声称不需要服务器代码。你可以申请邀请。

2016年8月更新:EmailJS似乎已经上线了。你每月可以免费发送200封电子邮件,如果数量更多,还可以订阅。

你的问题没有一个直接的答案,因为我们不能只使用javascript发送电子邮件,但有一些方法可以使用javascript为我们发送电子邮件:

1)使用API并通过javascript调用API为我们发送电子邮件,例如https://www.emailjs.com说你可以在一些设置后使用下面的代码来调用他们的API:

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)创建一个后端代码来为你发送电子邮件,你可以使用任何后端框架来为你做这件事。

3)使用像这样的东西:

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

这将打开你的电子邮件应用程序,这可能会进入阻止弹出在你的浏览器。

一般来说,发送电子邮件是一个服务器任务,所以应该在后端语言中完成,但我们可以使用javascript来收集所需的数据,并将其发送到服务器或api,我们也可以使用第三方应用程序,并通过浏览器使用javascript打开它们。

简单的回答是,仅使用JavaScript无法做到这一点。您需要一个服务器端处理程序来连接SMTP服务器以实际发送邮件。网上有很多简单的邮件脚本,比如下面这个PHP脚本:

使用Ajax向PHP脚本发送请求,检查所需字段是否为空或使用js不正确,还保留从您的服务器发送的邮件的记录。

function sendMail() is good for doing that.

检查从脚本发送邮件时捕捉到的任何错误,并采取适当的操作。 为了解决它,例如,如果邮件地址不正确或邮件没有发送由于服务器问题或它在队列中,在这种情况下报告给用户立即和防止多人发送相同的电子邮件一次又一次。 使用jQuery Get和POST从你的脚本得到响应

.get元(URL, callback); .post元(URL, callback);

如果且仅当我必须使用一些js库时,我会用SMTPJs库来做。它提供加密您的凭证,如用户名,密码等。

我找不到一个能真正满足最初问题的答案。

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>

再次坦白地说,我创建这个服务是因为我找不到合适的答案。