使用JavaScript调用PHPMailer实现邮件发送

昨天 7194阅读

在Web开发中，邮件发送是一个常见的需求，比如用户注册时接收验证邮件、订单状态通知等。JavaScript本身不能直接发送邮件，因为它运行在客户端浏览器，出于安全考虑，浏览器不允许直接访问邮件服务器。不过，我们可以借助服务器端脚本语言，如PHP，结合PHPMailer库来实现邮件发送功能，而JavaScript负责与服务器进行交互。

1. 准备工作

1.1 安装PHPMailer

PHPMailer是一个流行的PHP邮件发送库，它简化了邮件发送的过程。首先，你需要从PHPMailer的官方仓库下载源码，然后将其解压到你的项目目录中。

1.2 配置邮件服务器信息

在使用PHPMailer之前，你需要配置邮件服务器的相关信息，如SMTP服务器地址、端口、用户名、密码等。这些信息通常由你的邮件服务提供商提供。

2. 创建PHP邮件发送脚本

以下是一个简单的PHP脚本，使用PHPMailer发送邮件：

<?php
// 引入PHPMailer类文件
require 'path/to/PHPMailer/src/PHPMailer.php';
require 'path/to/PHPMailer/src/SMTP.php';
require 'path/to/PHPMailer/src/Exception.php';

use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\SMTP;
use PHPMailer\PHPMailer\Exception;

// 创建PHPMailer实例
$mail = new PHPMailer(true);

try {
    // 服务器设置
    $mail->SMTPDebug = SMTP::DEBUG_OFF;  // 关闭调试信息
    $mail->isSMTP();  // 使用SMTP
    $mail->Host       = 'smtp.example.com';  // SMTP服务器地址
    $mail->SMTPAuth   = true;  // 开启SMTP认证
    $mail->Username   = 'your_email@example.com';  // SMTP用户名
    $mail->Password   = 'your_password';  // SMTP密码
    $mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS;  // 启用TLS加密
    $mail->Port       = 587;  // SMTP端口

    // 收件人信息
    $mail->setFrom('your_email@example.com', 'Your Name');
    $mail->addAddress('recipient@example.com', 'Recipient Name');

    // 邮件内容
    $mail->isHTML(true);  // 设置邮件为HTML格式
    $mail->Subject = 'Test Email';
    $mail->Body    = '<p>This is a test email sent using PHPMailer.</p>';

    // 发送邮件
    $mail->send();
    echo 'Message has been sent';
} catch (Exception $e) {
    echo "Message could not be sent. Mailer Error: {$mail->ErrorInfo}";
}
?>

代码解释：

引入PHPMailer的相关类文件。
创建PHPMailer实例，并设置服务器信息，包括SMTP服务器地址、端口、认证信息等。
设置收件人信息和邮件内容，这里设置邮件为HTML格式。
调用send()方法发送邮件，如果发送成功，输出提示信息；如果失败，输出错误信息。

3. 使用JavaScript调用PHP脚本

为了实现用户在网页上输入邮件信息并发送，我们可以使用JavaScript通过AJAX技术与PHP脚本进行交互。以下是一个简单的HTML和JavaScript示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Send Email</title>
</head>

<body>
    <form id="emailForm">
        <label for="recipient">Recipient:</label>
        <input type="email" id="recipient" name="recipient" required><br>
        <label for="subject">Subject:</label>
        <input type="text" id="subject" name="subject" required><br>
        <label for="message">Message:</label>
        <textarea id="message" name="message" required></textarea><br>
        <button type="submit">Send Email</button>
    </form>
    <div id="result"></div>

    <script>
        const form = document.getElementById('emailForm');
        form.addEventListener('submit', function (e) {
            e.preventDefault();

            const recipient = document.getElementById('recipient').value;
            const subject = document.getElementById('subject').value;
            const message = document.getElementById('message').value;

            // 创建XMLHttpRequest对象
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'send_email.php', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

            // 监听请求状态变化
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    document.getElementById('result').innerHTML = xhr.responseText;
                }
            };

            // 发送请求
            const data = `recipient=${encodeURIComponent(recipient)}&subject=${encodeURIComponent(subject)}&message=${encodeURIComponent(message)}`;
            xhr.send(data);
        });
    </script>
</body>

</html>