[英]Undefined values in email response
I'm trying to use AJAX for my contact form which sends the form data to the server.我正在尝试将 AJAX 用于我的联系表单,该表单将表单数据发送到服务器。 Which should then email me users information through the input fields.然后应该通过输入字段输入 email me 用户信息。
The issue I'm having is, the formData seems to doing as normal (appears in the.network on the browser) But when my email comes through i'm getting undefined values?我遇到的问题是,formData 似乎正常运行(出现在浏览器的 .network 中)但是当我的 email 通过时,我得到了未定义的值?
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);
};
Below is the field being emailed to me.以下是通过电子邮件发送给我的字段。 As you can see, in the email body I've added "run test"as a string and that returns perfect in the email. Why is req.body giving me undefined values?如您所见,在 email 正文中,我添加了“运行测试”作为字符串,并在 email 中返回完美。为什么 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);
You're sending your request body as multipart/form-data
, not application/x-www-form-urlencoded
.您将请求正文作为multipart/form-data
,而不是application/x-www-form-urlencoded
。
If you wanted to handle the former, you'd need something like the Multer middleware in your express app.如果你想处理前者,你需要在你的 express 应用程序中使用Multer 中间件之类的东西。
The quick and easy solution is to wrap your FormData
in URLSearchParams
快速简便的解决方案是将FormData
包装在URLSearchParams
中
xhr.send(new URLSearchParams(formData))
This will post your data as application/x-www-form-urlencoded
which is handled by the express.urlencoded()
middleware you're already using.这会将您的数据发布为application/x-www-form-urlencoded
,它由您已经在使用的express.urlencoded()
中间件处理。
I also highly recommend adding the event listener to your form's submit event instead of a button click.我还强烈建议将事件侦听器添加到表单的提交事件中,而不是单击按钮。 That way, you can catch things like "type Enter to submit"这样,您就可以捕捉到诸如“键入Enter以提交”之类的内容
document.querySelector("form").addEventListener("submit", e => {
e.preventDefault()
const formData = new FormData(e.target)
// ...and the rest of your "send" logic
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.