当发送AJAX后请求时，404和405响应？

Question

我试图从一个表单中收集信息，而不需要重新加载页面，但每次我都得到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();

FORM

 <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: "<[email protected]>",
              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.comdeapi.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();
});