Запрос Ajax не работает после производственной сборки gatsby js

У меня есть простая настройка формы на моем статическом сайте 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);
   });
});

}

javascript ajax gatsby
person Martin Conde    schedule 27.01.2018    source источник
comment
Определение Vanilla JS сильно изменилось с момента написания этого устаревшего кода. Кроме того, с какой стати вы проверяете, window равно undefined?   -  person Aluan Haddad    schedule 27.01.2018
comment
Хорошо, отредактирую соответственно, спасибо;) Если я не проверю, сборка gatsby не будет работать, поэтому я выполнил инструкции здесь: gatsbyjs.org/docs/debugging-html-builds   -  person Martin Conde    schedule 27.01.2018
comment
Посмотрите на функцию fetch. Он возьмет все, что вы разместили, и сократит его до 3 строк простого кода.   -  person Aluan Haddad    schedule 27.01.2018
comment
Огромное спасибо, обязательно проверю. Никогда не использовал его, так что давайте посмотрим ... Было бы слишком много просить образец кода того, как вы это сделаете? В любом случае спасибо :)   -  person Martin Conde    schedule 27.01.2018

Ответы (1)


arrow_upward
2
arrow_downward

После того, как меня указали в правильном направлении, я заставил его работать ..

Я использовал фрагмент из 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();

    });
  });

}
}
person Martin Conde    schedule 27.01.2018