javascript - Gatsby JS的生产构建后，Ajax请求不起作用

我在静态gatsbyJS网站上有一个简单的表单设置（使用formspree.io）。现在，我实现了一个简单的AJAX请求，而不是将用户重定向到另一个页面。

在开发模式下，一切都很好。不过，一旦我建立并提供网站服务，提交表单后便会以某种方式退回到重定向。我只是不知道这里出了什么问题，我们将不胜感激。

这是我的表格：

<form id='myform' action="http://formspree.io/[email protected]" method="POST">
  <div className="formgroup">
    <input id='name' type="text" name="name" placeholder='Name'/>
    <input id='email' type="email" name="email" placeholder='Email'/>
  </div>
  <div className="formfield">
    <textarea id='message' name="message" rows='6' placeholder='Message'/>
  </div>
  <div className="formfield">
    <input id='send-button' type="submit" value="Send"/>
  </div>
</form>

这是我的Javascript：

if (typeof window !== `undefined`) {

document.addEventListener('DOMContentLoaded',function(){

var contactForm = document.querySelector('#myform'),
   inputName = contactForm.querySelector('[name="name"]'),
   inputEmail = contactForm.querySelector('[name="email"]'),
   inputMessage = contactForm.querySelector('[name="message"]'),
   sendButton = contactForm.querySelector('#send-button');

   sendButton.addEventListener('click', function(event){
     event.preventDefault(); // prevent the form to do the post.

     sendButton.value = 'Sending..';

     var xhr = new XMLHttpRequest();
     xhr.open('POST', '//formspree.io/[email protected]', true);
     xhr.setRequestHeader("Accept", "application/json");
     xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

     xhr.onloadend = function (res) {
       if (res.target.status === 200){
         sendButton.value = 'Message sent! I will be in touch soon.';
         contactForm.reset();
       } else {
         sendButton.value = 'Error!';
       }
     }

     xhr.send("name=" + inputName.value + "email=" + inputEmail.value + "message=" + inputMessage.value);
   });
});

}

最佳答案

指出正确的方向后，我开始工作了。

我使用了https://www.snip2code.com/Snippet/1613019/formspree-with-fetch/中的代码段，并对其进行了少许修改，以在提交时更改按钮文本。它可以在gatsbyjs网站的构建环境中完美运行：

if (typeof window !== `undefined`) {

window.onload=function(){
  const sendButton = document.getElementById('send-button')

  const formDataToJson = formData => {
    const entries = formData.entries();
    const dataObj = Array.from(entries).reduce( (data, [key, value]) => {
      data[key] = value;
      if (key === 'email') {
        data._replyTo = value;
      }
      return data;
    }, {});
    return JSON.stringify(dataObj);
  };

  const postToFormspree = formData => fetch(`https://formspree.io/[email protected]`, {
    method: 'POST',
    body: formDataToJson(formData),
    headers: {
      'Content-Type': 'application/json'
    }
  }).then(r => r.json());

  document.getElementById('myform').addEventListener('submit', function (e) {

    e.preventDefault();

    sendButton.value = 'Sending..';

    const formData = new FormData(this);

    postToFormspree(formData).then(response => {
        sendButton.value = 'Message sent!';
        myform.reset();

    });
  });

}
}