Javascript 在盖茨比js的生产构建之后，Ajax请求不起作用

我在静态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>

---

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

我使用了中的代码段，并对其进行了轻微修改，以在提交时更改按钮文本。它在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();

    });
  });

}
}

---

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

我使用了中的代码段，并对其进行了轻微修改，以在提交时更改按钮文本。它在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();

    });
  });

}
}

---

自从编写这段遗留代码以来，Vanilla JS的定义发生了很大的变化。还有，你到底为什么要检查

窗口

是否

未定义

？哦，好的，会相应地编辑的，谢谢；）如果我不检查它，盖茨比构建将无法工作，因此我按照这里的说明进行操作：查看

fetch

函数。它会将你发布的所有内容缩减为3行简单代码。非常感谢你一定会查看它。从来没用过，所以让我看看。。要求一段你将如何做的代码样本会不会太多？不管怎样，谢谢：）

var res=wait fetch（url，{method:'POST'，标题：{“Content Type”，“application/x-www-form-urlencoded”，body:“you get the idea”}）；var data=await res.json（）自从编写这段遗留代码以来，Vanilla JS的定义发生了很大的变化。还有，你到底为什么要检查
窗口
是否
未定义
？哦，好的，会相应地编辑的，谢谢；）如果我不检查它，盖茨比构建将无法工作，因此我按照这里的说明进行操作：查看
fetch
函数。它会将你发布的所有内容缩减为3行简单代码。非常感谢你一定会查看它。从来没用过，所以让我看看。。要求一段你将如何做的代码样本会不会太多？不管怎样，谢谢：）
var res=wait fetch（url，{method:'POST'，标题：{“Content Type”，“application/x-www-form-urlencoded”，body:“you get the idea”}）；var data=await res.json（）