发送 AJAX 发布请求时出现 404 和 405 响应？

Question

我正在尝试从表单中收集信息而无需重新加载页面，但每次我收到 404 或 405 的响应时。我尝试使用不同的路由，如“/”、“/index.html”和“ index.html' 但它只是一直加载，直到超时或给我一个错误。 信息通过，因为我从 nodemailer 获得了 email 但在客户端，浏览器只是继续加载。 我认为路线是错误的，但我是 AJAX 的新手，所以有人可以帮我解决这个问题吗？ 另外，我只使用香草 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");
      });
});

Answer 1

您的快递服务器需要发送如下响应：

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();
});