如何使用 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);
    });
});

关于使用 JavaScript 发送电子邮件的常见问题

1. API 在发送电子邮件中的作用是什么？
2. API 使您能够 JavaScript 用于将电子邮件数据发送到服务器进行处理的代码，确保安全且可扩展的电子邮件传递方法。
3. 为什么是 fetch 这个过程中命令必不可少吗？
4. 这 fetch 命令发送异步 HTTP 请求，允许您的站点与后端通信，而无需刷新页面。
5. 我可以在不使用 API 的情况下发送电子邮件吗？
6. 是的，您可以使用 mailto 方法，但它取决于用户的电子邮件客户端，并且不会直接从您的服务器发送电子邮件。
7. 使用 Nodemailer 这样的服务有什么好处？
8. Nodemailer 通过提供易于使用的 API 来配置和向各种提供商发送电子邮件，简化了后端电子邮件发送。
9. 如何处理电子邮件发送过程中的错误？
10. 使用 try-catch JavaScript 或后端代码中的块来捕获和处理错误，向用户提供反馈或记录问题以进行调试。

完成无缝电子邮件发送

实施直接从您的网站发送消息的系统可以增强用户参与度并使您的平台专业化。通过使用 JavaScript 与后端解决方案一起，您可以创建强大且安全的设置以实现高效通信。 😊

借助 API 和库等可扩展工具，该流程可以适应从小型网站到大型平台的各种需求。这种方法不仅提高了用户满意度，还简化了开发人员的电子邮件发送，使其成为任何 Web 项目的宝贵补充。