电子邮件回复中的未定义值

Question

我正在尝试将 AJAX 用于我的联系表单，该表单将表单数据发送到服务器。然后应该通过输入字段通过电子邮件向我发送用户信息。

我遇到的问题是，formData 似乎正常运行（出现在浏览器的网络中）但是当我收到电子邮件时，我收到了未定义的值？

const submit = document.querySelector('.contact-btn');

submit.addEventListener('click', send);

function send(event){
    event.preventDefault();
    const url = "https://us-central1-selexin-website.cloudfunctions.net/app/sendemail";
    let form = document.querySelector('form');
    let formData = new FormData(form);
    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = () => {
        if(xhr.readyState === XMLHttpRequest.DONE){
            console.log(formData)
    // Make a pop up message in green below the textarea box to notify user email was sent.

    }   
}
    xhr.open('POST', url, true);
    xhr.send(formData);
};

下面是通过电子邮件发送给我的字段。如您所见，在电子邮件正文中，我添加了“运行 test”作为字符串，并且在电子邮件中添加了 returns perfect。为什么 req.body 给我未定义的值？

const transport = nodemailer.createTransport(sendgridTransport({
    auth: {
        api_key: apiKey
    },
}));

app.use(express.urlencoded({extended: false}));
app.use(cors({ origin: true }));

app.post('/sendemail', (req, res) => {
  const {name, email, number, message} = req.body;
    return transport.sendMail({
    to: 'email receiving', 
    from: 'from this email',
    subject: 'New Contact Request',
    html: `
    <p>You have a new Contact Request</p>
    <h3>Contact Details</h3>
    <ul>
        <li>Name: 'Run test'</li>
        <li>Email: ${email}</li>
        <li>Number: ${number}</li>
        <li>Message: ${message}</li>
    </ul>
    `
    }).then(() => {
      if(res.sendStatus(200)){
        console.log('it logs');
      };
    })
 });

exports.app=functions.https.onRequest(app);

Answer 1

您发送的请求正文为 multipart/form-data，而不是 application/x-www-form-urlencoded。

如果你想处理前者，你需要在你的 express 应用中使用类似 Multer middleware 的东西。

快速简便的解决方案是将 FormData 包裹在 URLSearchParams

中

xhr.send(new URLSearchParams(formData))

这将 post 您的数据作为 application/x-www-form-urlencoded 由您已经在使用的 express.urlencoded() 中间件处理。

我还强烈建议将事件侦听器添加到表单的 submit 事件中，而不是单击按钮。这样，您就可以捕获诸如 "之类的内容"键入 Enter 以提交"

document.querySelector("form").addEventListener("submit", e => {
  e.preventDefault()
  const formData = new FormData(e.target)

  // ...and the rest of your "send" logic
})

电子邮件回复中的未定义值

Undefined values in email response

javascript

ajax

form-data

express

x-www-form-urlencoded