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

当前回答

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

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>

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

其他回答

间接通过您的服务器-调用第三方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密钥对任何人都是可见的,因此任何恶意用户都可能使用您的密钥发送电子邮件,从而耗尽您的配额。

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

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

function sendMail() is good for doing that.

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

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

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

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

在sendMail()函数中,将ajax调用添加到后端,您可以在服务器端实现此功能。

JavaScript不能从web浏览器发送电子邮件。然而,从你已经尝试实现的解决方案中退一步,你可以做一些满足最初需求的事情:

发送邮件时不刷新页面

您可以使用JavaScript构造电子邮件所需的值,然后向实际发送电子邮件的服务器资源发出AJAX请求。(我不知道你在使用什么服务器端语言/技术,所以这部分取决于你。)

如果您不熟悉AJAX,快速搜索谷歌将为您提供大量信息。通常,你可以使用jQuery的$.ajax()函数快速启动并运行它。您只需要在服务器上有一个可以在请求中调用的页面。