發布請求后如何防止重新加載？

Question

我正在嘗試向服務器發出發布請求並對響應做一些事情。 事情似乎在服務器端起作用。 問題是頁面在響應完成后重新加載，我無法對響應做任何事情。

常見的建議是使用button或preventDefault 。 這些建議並不能解決問題：正如您在下面看到的，輸入類型是button （不是submit ）並且 event 上的preventDefault()不起作用。

有人知道我缺少什么嗎？

 <form id="modelCodeForm">
    <label for="codehere"></label>
    <div id="modelAreaDiv">
      <textarea id="modelArea" cols="60" rows="20">
stuff
      </textarea>
      <br>
      <input id="submitUserModel" type="button" value="run on server">
  </div>
  </form>

function initializeUserModel(){
  let model = document.getElementById("modelArea").value;
  fetch('http://localhost:8080/', {
      method: 'post',
      headers: {'Content-Type': 'text/plain'},
      body: model
    })
      .then(response => response.json())
      .then(data => {
        console.log(data);
      }).then(console.log("received!"))     
}  

Answer 1

我明白了這一點。 事實證明，問題是由於 VS Live Server 檢測到文件夾中的更改並熱加載應用程序造成的。 更改是由於后端在同一文件夾中保存日志。 錯過真的很傻...

Answer 2

如果您想在提交表單時觸發 function，那么您可以使用 HTML forms 上可用的“onsubmit”事件偵聽器。

所以你會做onsubmit="initializeUserModel(event)" 。 您將事件 object 傳遞給它，這樣您就可以在 function 中調用event.preventDefault()並停止重新加載頁面。

將輸入更改為 type="submit"（或將其設置為 type="submit" 的按鈕），否則不會觸發表單提交。

    <form id="modelCodeForm" onsubmit="initializeUserModel(event)">
      <label for="codehere"></label>
      <div id="modelAreaDiv">
        <textarea id="modelArea" cols="60" rows="20">Stuff</textarea>
        <br />
        <input id="submitUserModel" type="submit" value="run on server" />
      </div>
    </form>

  function initializeUserModel(event) {
    event.preventDefault();
    let model = document.getElementById("modelArea").value;
    fetch("http://localhost:8080/", {
      method: "post",
      headers: { "Content-Type": "text/plain" },
      body: model,
    })
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
      })
      .then(console.log("received!"));
  }