javascript - 发送 AJAX 发布请求时的 404 和 405 响应?
问题描述
我正在尝试从表单中收集信息而无需重新加载页面,但每次我收到 404 或 405 的响应时。我尝试使用不同的路由,如“/”、“/index.html”和“ index.html' 但它只是一直加载,直到超时或给我一个错误。信息通过是因为我收到了来自 nodemailer 的电子邮件,但在客户端,浏览器一直在加载。我认为路线是错误的,但我是 AJAX 的新手,所以有人可以帮我解决这个问题吗?另外,我只使用 Vanilla Javascript。
这是我的代码:
const http = new XMLHttpRequest();
const submit = document.querySelector('.submit');
http.onload = () => {
submit.addEventListener('click', () =>{
const alertMessage = document.querySelector('.alert');
const email = document.querySelector('#email').value;
const name = document.querySelector('.name').value;
if (name === '' || email === '') {
alertMessage.innerHTML = 'Name And Email Required';
console.log(name)
} else {
alertMessage.innerHTML = 'Success! Someone will be in touch with you soon!'
// email.value = '';
// form.reset();
}
});
}
http.open('POST', '/index.html', true);
http.send();
形式
<div class="contactform">
<div class="alert"></div>
<form action="/index.html" method="POST" class="form">
<input type="text" name='name' id='name' placeholder="Name">
<input type="email" name='email' id='email' placeholder="Email">
<textarea class="messages" name="messages" placeholder="Message...."></textarea>
<button class="submit" type="submit" value="submit">Send</button>
</form>
</div>
</div>
快递代码
// Index Route
app.get('/index.html', function(req, res){
});
app.post("/index.html", (req, res) => {
const name = req.body.name;
const email = req.body.email;
const messages = req.body.messages;
console.log(messages, email, name);
console.log(req.body);
var userData = new Form(req.body);
userData.save()
.then(item =>{
async function main() {
// Generate test SMTP service account from ethereal.email
// Only needed if you don't have a real mail account for testing
let testAccount = await nodemailer.createTestAccount();
// create reusable transporter object using the default SMTP transport
let transporter = nodemailer.createTransport({
host: "smtp.gmail.com",
port: 587,
secure: false, // true for 465, false for other ports
auth: {
user: 'jalissaw32',
pass: 'Winchester32@'
},
tls: {
rejectUnauthorized: false
}
});
// send mail with defined transport object
let info = await transporter.sendMail({
from: email, // sender addresss
cc: email,
to: "<jalissa_williams@yahoo.com>",
subject: name,
text: messages,
html: messages,
});
console.log("Message sent: %s", info.messageId);
console.log("Preview URL: %s", nodemailer.getTestMessageUrl(info));
}
main().catch(console.error);
})
.catch(err =>{
res.status(400).send("Unable to save to database");
});
});
解决方案
您的快递服务器需要发送如下响应:
res.sendStatus(200);
https://expressjs.com/de/api.html#res.sendStatus
客户端应更改为:
const submit = document.querySelector('.submit');
submit.addEventListener('click', (e) => {
e.preventDefault();
const alertMessage = document.querySelector('.alert');
const email = document.querySelector('#email').value;
const name = document.querySelector('.name').value;
if (name === '' || email === '') {
alertMessage.innerHTML = 'Name And Email Required';
console.log(name)
} else {
alertMessage.innerHTML = 'Success! Someone will be in touch with you soon!'
// email.value = '';
// form.reset();
}
const http = new XMLHttpRequest();
http.onload = () => {
console.log("email sent!");
};
http.open('POST', '/index.html', true);
http.send();
});
推荐阅读
- windows - 如何在 .bat 文件中的每个命令之前显示一条消息?
- python - 我无法弄清楚这是否有问题
- ion-range-slider - 离子范围滑块和模态:如何在显示模态之前填充和填充
- angular - 如何将嵌套的 json 对象映射到 Angular 11 中的模型?
- c - PicSimlab 0.7.5版本1分钟内关机非常频繁
- javascript - 如何计算3个列表的元素之间?
- arrays - 如何通过可重用函数从 MAC 地址(在 char* 中)中去除“\x”?
- android - Telr WebView 不会将我重定向到失败或成功活动,无法将状态响应转换为失败状态响应
- c# - 将委托和要在委托中使用的参数传递给函数
- json - 验证嵌套响应体放心