javascript - Ajax 请求在 gatsby js 生产构建后不起作用

Question

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

在开发模式下，一切都工作得很好。不过，一旦我构建并提供了该网站，它就会在提交表单后以某种方式回退到重定向。我只是不知道这里出了什么问题，任何帮助将不胜感激。

这是我的表格:

<form id='myform' action="http://formspree.io/testmail@gmail.com" 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/testmail@gmail.com', 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);
   });
});

}

Answer 1

在被指出正确的方向后，我开始工作了..

我使用了 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/youremail@gmail.com`, {
    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();

    });
  });

}
}