NodeJS 页面加载时立即触发Post请求

wkyowqbh  于 2022-11-03  发布在  Node.js
关注(0)|答案(1)|浏览(152)

我有一个简单的单页网站,我有一个电子邮件联系表。我的目标是发送一封电子邮件到我的帐户,当用户填写表格并提交它。但是,它不工作,导致POST请求后,页面加载和我的app.js不能处理sendMail函数,因为所有的参数都是未定义的。

这是我在app.js中的Node js函数,用于发送电子邮件:

const app = require('express')();
const nodemailer = require('nodemailer');
const path = require('path');
const PORT = process.env.PORT || 3000;
const express = require('express');

async function mainMail(name, email, message) {
    const transporter = await nodemailer.createTransport({
        service: 'gmail',
        auth: {
            user: '*my_email*',
            pass: '*my_password*'
        }
    });

    const mailOption = {
        from: '*my email*',
        to: '*my second email*',
        subject: email,
        html: `You've got message from:
        email: ${email}
        name: ${name}
        message: ${message}`
    };

    try {
        await transporter.sendMail(mailOption);
        return Promise.resolve('Message sent successfully');
    } catch(error) {
        return Promise.reject(error);
    }
}

app.post('/', async(req, res, next) => {
    try {
        await mainMail(req.body.name, req.body.email, req.body.message);
        res.send('Message sent!');
    } catch(error) {
        console.log(error);
        res.send('Message not sent!');
    }
})

app.listen(PORT, () => {
    console.log(`PORT -> ${PORT}`);
});

下面是HTML表单:

<form method="post" class="contacts-form" id="contacts-form">
            <div class="contacts-upper-inputs">
                <div class="input-container half-input">
                    <label for="name" class="primary-label">Name</label>
                    <input required name="name" id="name" class="primary-input"></input>
                </div>
                <div class="input-container half-input">
                    <label for="email" class="primary-label">Email</label>
                    <input required name="email" id="email" class="primary-input"></input>
                </div>
            </div>
            <div class="input-container">
                <label for="message-text" class="primary-label">Message</label>
                <textarea required name="message" name="" id="message" cols="30" rows="10" class="primary-input"></textarea>
            </div>
            <div style="display: flex; justify-content: center;">
                <button onclick="sendEmail(event)" class="btn-contact">Submit</button>
            </div>
        </form>

下面是index.js中Submit按钮上的Submit处理程序:

function sendEmail(event) {
    event.preventDefault();
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;
    const message = document.getElementById('message').value;

    $.post('/', 
        {
            name: name,
            email: email,
            message: message
        },
        function(data, status) {
            console.log('status -> ', status);
        });
}
k5hmc34c

k5hmc34c1#

按钮的onclick属性应该是sendEmail,而不是sendEmail(event)。添加括号将调用函数,而不是对其赋值。

相关问题