Javascript 使用nodeEmailer发送邮件后,页面开始加载,而不实际更改元素/页面
我在react组件中有以下基本形式:Javascript 使用nodeEmailer发送邮件后,页面开始加载,而不实际更改元素/页面,javascript,node.js,reactjs,axios,Javascript,Node.js,Reactjs,Axios,我在react组件中有以下基本形式: <form method="POST" action="/sendcontact" encType="multipart/form-data" className="contact-form"> <label>* Your name</label> <input type="text&quo
<form method="POST" action="/sendcontact" encType="multipart/form-data" className="contact-form">
<label>* Your name</label>
<input
type="text"
name="username"
placeholder="Your name"
required
/>
<label>* E-mail</label>
<input
type="email"
name="email"
placeholder="Your e-mail"
required
/>
<label>* Message</label>
<textarea
name="message"
placeholder="Your message here..."
required
/>
<button type="submit" className="submit-btn">Submit</button>
</form>
邮件成功发送,但在提交表单后,页面基本上永远开始加载,除非我手动停止。我所说的加载是指仅在web选项卡上,页面名称旁边:
我真的不知道是什么原因导致了这个问题,但我想修复它,这样用户就不会因为页面开始加载而认为实际发生了什么
我已经注意到,如果在React组件中我使用状态存储表单值并通过axios将其发送到节点,则不会出现这种情况,但我无法做到这一点,因为我还必须发送输入[type=“file”]的值,而且我还没有弄清楚如何使用axios执行此操作。每次我们向服务器发出请求时,浏览器等待响应(如Molda评论中所述) 基本上,在提交表单后,将
http.post
发送到'/sendcontact'
,控制器内部不会调用任何错误来输入if(err)
。这意味着您的服务器不会以res.end()、res.send()、res.json()或res.redirect()的形式将任何响应返回到用户的浏览器
一个好的做法是将其重定向到一个成功页面,调用res.redirect('/),每次我们向服务器发出请求时,浏览器都会等待响应(如Molda评论中所述)
基本上,在提交表单后,将http.post
发送到'/sendcontact'
,控制器内部不会调用任何错误来输入if(err)
。这意味着您的服务器不会以res.end()、res.send()、res.json()或res.redirect()的形式返回任何响应
返回用户浏览器
一个好的做法是将其重定向到一个成功页面,调用res.redirect('/Inapp.post('/sendcontact'
只有在出现错误时才会响应返回res.end(“出错!”);
但在没有错误时也需要响应。添加类似res.json({success:true})的内容
到transporter.sendMail
函数的回调。浏览器基本上在等待服务器的响应,但没有得到任何结果。在app.post(“/sendcontact”
中,只有在出现错误时才会响应返回res.end(“出错!”)
但是你也需要在没有错误时做出响应。向transporter.sendMail
函数的回调中添加类似于res.json({success:true})
的内容。浏览器基本上在等待服务器的响应,并且没有得到任何结果。
app.post('/sendcontact',(req,res) => {
upload(req,res,function(err){
if(err){
console.log(err)
return res.end("Something went wrong!");
}else{
let mailOptions = {
from: req.body.email,
to: 'mymail@gmail.com',
subject: `New message from ${req.body.email}`,
text: req.body.message
};
transporter.sendMail(mailOptions, function(error, info){
if (error) {
console.log(error);
} else {
console.log('Email sent: ' + info.response);
}
});
}
})
});