如何使用 JavaScript 发送电子邮件而不重新加载页面

使用 API 通过 JavaScript 实现电子邮件发送

此方法使用 JavaScript 和第三方电子邮件服务 API 来实现无缝后端电子邮件功能。

// Frontend JavaScript to send email using an API
async function sendMail() {
    const emailInput = document.getElementById('pmSubject').value;
    if (!emailInput) {
        alert('Please enter an email address.');
        return;
    }
    const payload = {
        to: emailInput,
        subject: 'Invitation',
        body: 'You are invited to check out this website!',
    };
    try {
        const response = await fetch('/send-email', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload),
        });
        const result = await response.json();
        alert(result.message);
    } catch (error) {
        console.error('Error sending email:', error);
        alert('Failed to send email. Please try again later.');
    }
}

创建后端 API 来发送电子邮件

该后端脚本是用 Node.js 编写的，并使用 Nodemailer 库安全地发送电子邮件。

const express = require('express');
const nodemailer = require('nodemailer');
const app = express();
app.use(express.json());
app.post('/send-email', async (req, res) => {
    const { to, subject, body } = req.body;
    if (!to || !subject || !body) {
        return res.status(400).json({ message: 'Invalid request payload' });
    }
    try {
        const transporter = nodemailer.createTransport({
            service: 'gmail',
            auth: {
                user: 'your-email@gmail.com',
                pass: 'your-email-password',
            },
        });
        await transporter.sendMail({
            from: 'your-email@gmail.com',
            to,
            subject,
            text: body,
        });
        res.json({ message: 'Email sent successfully!' });
    } catch (error) {
        console.error('Error sending email:', error);
        res.status(500).json({ message: 'Internal Server Error' });
    }
});
app.listen(3000, () => console.log('Server running on port 3000'));

通过单元测试测试功能

前端和后端的单元测试可确保稳健且无错误的实施。

// Frontend test using Jest
test('sendMail() validates email input', () => {
    document.body.innerHTML = '<input id="pmSubject" value="test@example.com" />';
    global.fetch = jest.fn(() => Promise.resolve({ json: () => ({ message: 'Email sent successfully!' }) }));
    sendMail();
    expect(fetch).toHaveBeenCalledWith('/send-email', expect.anything());
});
// Backend test using Mocha
const request = require('supertest');
const app = require('./app'); // Your Express app
describe('POST /send-email', () => {
    it('should return 400 for missing fields', async () => {
        const res = await request(app).post('/send-email').send({});
        expect(res.status).toBe(400);
    });
    it('should send email successfully', async () => {
        const res = await request(app)
            .post('/send-email')
            .send({
                to: 'test@example.com',
                subject: 'Test',
                body: 'This is a test email',
            });
        expect(res.status).toBe(200);
    });
});

1. 有关使用 Fetch API 进行异步请求的详细信息： MDN Web 文档 - 获取 API
2. Nodemailer 电子邮件功能综合指南： Nodemailer 官方文档
3. 集成第三方API介绍： Twilio 博客 - 使用 Node.js 发送电子邮件
4. 前端和后端通信的最佳实践： FreeCodeCamp - 使用 Fetch API
5. 对凭证安全处理的见解： Auth0 - 使用 dotenv 保护 Node.js 应用程序