Запрос POST Fetch, вызывающий перезагрузку страницы с использованием javascript и форму отправки с предотвращением по умолчанию - PullRequest
Новая
       155

Запрос POST Fetch, вызывающий перезагрузку страницы с использованием javascript и форму отправки с предотвращением по умолчанию

0 голосов
/ 07 августа 2020

Я работаю над проектом rails API + Javascript с простой формой на html. Каждый раз, когда я нажимаю кнопку отправки, весь мой код выполняется, но затем страница браузера перезагружается.

Вот код HTML: 

<form id="create-player">
        <h3>Enter Your Name</h3>
        <input
          type="text"
          name="name"
          value=""
          placeholder="Enter your name..."
          class="input-text"
        />
        <br />
        <input
          type="submit"
          name="submit"
          value="SUBMIT"
          class="submit"
        />
      </form>

Тогда мой js код: 

document.addEventListener("DOMContentLoaded", () => {
    //submit form action
    player_form.addEventListener("submit", function(a){
        a.preventDefault();
        console.log('submit pressed')
        fetchNewPlayer(a.target.name.value);
      });
})
function fetchNewPlayer(name){
    console.log('start fetch')
    let formData = {
        name: name
    }
    let configObj = {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Accept": "application/json"
      },
      body: JSON.stringify(formData)
    };

    fetch('http://localhost:3000/players', configObj)
    .then(function(response) {
        console.log('fetching', response);
        return response.json();
   
    })
    .then(function(object) {
        console.log('then', object);
        
    })
    .catch(function(error) {
        console.log('failed', error);
        alert("Error");
    });
  }

Безумно то, что если я прокомментирую fetchNewPlayer, страница не перезагружается. Может кто-нибудь помочь мне понять, что не так?

1 Ответ

0 голосов
/ 07 августа 2020

Вам необходимо использовать AbortController: 

let abortController = new AbortController();

let configObj = {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Accept": "application/json"
  },
  body: JSON.stringify(formData),
  signal : abortController.signal
};

window.onbeforeunload = function(e) { abortController.abort(); };
fetch('http://localhost:3000/players', configObj)
...
...