如何从 JavaScript 发送电子邮件？(1)

📌 相关文章

📜 如何从 JavaScript 发送电子邮件？(1)

📅 最后修改于: 2023-12-03 15:08:14.132000 🧑 作者: Mango

如何从 JavaScript 发送电子邮件？

在 Web 开发中，有时需要在前端页面中使用 JavaScript 发送电子邮件。虽然直接在浏览器中发送邮件是不可能的，但可以使用 JavaScript 向后台服务器发送请求，由后台服务器来完成邮件发送的过程。

前置条件

在使用 JavaScript 发送电子邮件之前，需要满足以下条件：

拥有一个后台服务器，能处理邮件发送的请求
后台服务器需要调用邮件发送 API 来实现邮件发送功能
前端页面需要引入 JavaScript SDK，调用后台服务器提供的邮件发送接口

以下是一个基础的发送邮件的 HTML 页面：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>发送邮件</title>
</head>
<body>

<form action="" method="POST">
    <label for="email">收件人：</label>
    <input type="email" placeholder="请输入收件人邮箱" id="email" name="email"><br><br>

    <label for="subject">主题：</label>
    <input type="text" placeholder="请输入邮件主题" id="subject" name="subject"><br><br>

    <label for="content">内容：</label><br>
    <textarea rows="6" cols="50" placeholder="请输入邮件内容" id="content" name="content"></textarea><br><br>

    <input type="submit" value="发送">
</form>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="./send-email.js"></script>

</body>
</html>

其中，send-email.js 文件就是我们用来实现邮件发送的 JavaScript 文件。

发送邮件的 JavaScript 实现

发送邮件数据的获取与验证

首先，我们需要获取表单中用户输入的邮件发送数据，并进行必要的验证。以下是一个基础的邮件数据获取与验证的函数：

function getEmailData() {
    const email = $('#email').val();
    const subject = $('#subject').val();
    const content = $('#content').val();

    if (!email) {
        alert('请填写收件人邮箱！');
        return null;
    }

    if (!subject) {
        alert('请填写邮件主题！');
        return null;
    }

    if (!content) {
        alert('请填写邮件内容！');
        return null;
    }

    return {
        email: email,
        subject: subject,
        content: content,
    };
}

该函数通过 jQuery 获取表单元素的值，如果用户未填写必填项，则用 alert 提示用户并返回 null。否则，将获取到的邮件发送数据作为对象返回。

发送邮件的 AJAX 请求

在获取并验证邮件发送数据之后，需要使用 AJAX 请求将数据发送给后台服务器。以下是一个基础的邮件发送请求的函数：

function sendEmail(data) {
    $.ajax({
        type: 'POST',
        url: '/send-email',
        data: data,
        success: function (res) {
            if (res.success) {
                alert('邮件发送成功！');
            } else {
                alert('邮件发送失败：' + res.message);
            }
        },
        error: function (err) {
            alert('请求失败：' + err.statusText);
        }
    });
}

该函数使用 jQuery 的 AJAX 方法向后台服务器 /send-email 发送 POST 请求，并携带获取到的邮件发送数据。当请求成功时弹出提示框，显示邮件发送结果。当请求失败时同样弹出提示框，显示错误信息。

发送邮件的事件绑定

最后，我们需要使用 jQuery 将获取到的邮件发送数据绑定至发送按钮的点击事件中。以下是一个基础的邮件发送事件绑定的函数：

$(function () {
    $('form').submit(function (event) {
        event.preventDefault();

        const data = getEmailData();
        if (!data) {
            return;
        }

        sendEmail(data);
    });
});

该函数使用 jQuery 的 submit 方法对表单提交事件进行监听，在事件触发时使用 preventDefault 方法阻止表单的默认提交行为。然后，获取到用户填写的邮箱数据，并通过 sendEmail 函数将数据发送至后台服务器。

完整代码

以上就是使用 JavaScript 发送电子邮件的基础流程。完整的代码如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>发送邮件</title>
</head>
<body>

<form action="" method="POST">
    <label for="email">收件人：</label>
    <input type="email" placeholder="请输入收件人邮箱" id="email" name="email"><br><br>

    <label for="subject">主题：</label>
    <input type="text" placeholder="请输入邮件主题" id="subject" name="subject"><br><br>

    <label for="content">内容：</label><br>
    <textarea rows="6" cols="50" placeholder="请输入邮件内容" id="content" name="content"></textarea><br><br>

    <input type="submit" value="发送">
</form>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    function getEmailData() {
        const email = $('#email').val();
        const subject = $('#subject').val();
        const content = $('#content').val();

        if (!email) {
            alert('请填写收件人邮箱！');
            return null;
        }

        if (!subject) {
            alert('请填写邮件主题！');
            return null;
        }

        if (!content) {
            alert('请填写邮件内容！');
            return null;
        }

        return {
            email: email,
            subject: subject,
            content: content,
        };
    }

    function sendEmail(data) {
        $.ajax({
            type: 'POST',
            url: '/send-email',
            data: data,
            success: function (res) {
                if (res.success) {
                    alert('邮件发送成功！');
                } else {
                    alert('邮件发送失败：' + res.message);
                }
            },
            error: function (err) {
                alert('请求失败：' + err.statusText);
            }
        });
    }

    $(function () {
        $('form').submit(function (event) {
            event.preventDefault();

            const data = getEmailData();
            if (!data) {
                return;
            }

            sendEmail(data);
        });
    });
</script>

</body>
</html>

结语

使用 JavaScript 发送电子邮件需要与后台服务器进行配合，这里的后台服务器可以是自己搭建的，也可以是第三方提供的。同时，还需要使用邮件发送 API 来实现邮件发送功能。如果是使用 Node.js 搭建后台服务器，可以使用 nodemailer 库来实现邮件发送。