使用JavaScript通过前端发送电子邮件

2023年6月10日下午10:10 • JavaScript

下面是“使用JavaScript通过前端发送电子邮件”的完整攻略：

1.准备工作

要通过前端使用JavaScript发送电子邮件，你需要使用邮件服务提供商的API，本文以SendGrid为例进行说明。在使用SendGrid之前，你需要完成以下准备工作：

注册SendGrid账户并创建API密钥
创建一个用于发送邮件的HTML表单

2.获取API密钥

在SendGrid的控制台中，点击左侧菜单栏的“Settings”，然后选择“API Keys”，在此处即可创建API密钥。

3.创建发送电子邮件的JavaScript代码

以下是使用JavaScript发送电子邮件的代码示例：

function sendMail() {
    var email = $('#email').val();
    var subject = $('#subject').val();
    var message = $('#message').val();

    Email.send({
        Host: "smtp.sendgrid.net",
        Username: "apikey",
        Password: "SENDGRID_API_KEY",
        To: email,
        From: "your-email@example.com",
        Subject: subject,
        Body: message
    }).then(
        message => alert("Message sent successfully")
    );
}

此代码通过SendGrid的SMTP服务器发送电子邮件。你需要将SENDGRID_API_KEY替换为你的SendGrid API密钥，将your-email@example.com替换为你的电子邮件地址。

4.完成HTML表单

为了使用上述JavaScript代码，你需要在HTML中创建一个表单。以下是一个例子：

<form>
    <input type="email" id="email" placeholder="Email">
    <input type="text" id="subject" placeholder="Subject">
    <textarea id="message" placeholder="Message"></textarea>
    <button type="button" onclick="sendMail()">Send</button>
</form>

5.测试发送电子邮件

在完成上述步骤后，你的表单应该可以使用JavaScript发送电子邮件。测试一下吧！

示例

以下是一个使用SendGrid的完整代码示例：

<!doctype html>
<html>
<head>
    <title>Send email using JavaScript</title>
    <script src="https://smtpjs.com/v3/smtp.js"></script>
</head>
<body>
    <form>
        <input type="email" id="email" placeholder="Email">
        <input type="text" id="subject" placeholder="Subject">
        <textarea id="message" placeholder="Message"></textarea>
        <button type="button" onclick="sendMail()">Send</button>
    </form>

    <script>
        function sendMail() {
            var email = $('#email').val();
            var subject = $('#subject').val();
            var message = $('#message').val();

            Email.send({
                Host: "smtp.sendgrid.net",
                Username: "apikey",
                Password: "SENDGRID_API_KEY",
                To: email,
                From: "your-email@example.com",
                Subject: subject,
                Body: message
            }).then(
                message => alert("Message sent successfully")
            );
        }
    </script>
</body>
</html>

在使用此代码之前，请确保已经完成以下步骤：