POST Fetch 请求导致页面使用 javascript 重新加载并提交表单并防止默认

Question

我正在开发一个 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，页面不会重新加载。有人可以帮我理解什么问题吗？

Answer 1

您需要使用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)
...