发布请求后如何防止重新加载？答案

【问题标题】：How prevent reload after post request?发布请求后如何防止重新加载？
【发布时间】：2022-01-16 21:41:52
【问题描述】：

我正在尝试向服务器发出一个 post 请求并对响应做一些事情。事情似乎在服务器端起作用。问题是页面在响应完成后重新加载，我无法对响应做任何事情。

常见的建议是使用button 或preventDefault。这些建议并不能解决问题：如下所示，输入类型是button（不是submit）和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!"))     
}

【问题讨论】：

我无法重现该问题。单击该按钮不会触发任何 HTTP 请求。（包括来自fetch 的initializeUserModel 函数中的那个，因为它从未被调用过）
在调用函数的按钮上有一个事件监听器。
按钮是否提交重新加载页面的表单？
按钮不提交表单，只提交textarea 值。 document.getElementById("submitUserModel").addEventListener("click",initializeUserModel,false);

标签： javascript promise request response reload

【解决方案1】：

我明白了。事实证明，问题是由于 VS Live Server 检测到文件夹中的更改并热加载应用程序造成的。更改是由于后端在同一文件夹中保存日志。错过真是愚蠢的事情......

【讨论】：

【解决方案2】：

如果您想在提交表单时触发您的函数，那么您可以使用 HTML 表单上提供的 "onsubmit" 事件监听器。

所以你会这样做 onsubmit="initializeUserModel(event)"。您将事件对象传递给它，以便您可以在函数中调用 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!"));
  }

【讨论】：

我试过这个，但它不起作用。我认为这里还有其他事情发生，因为如果我注释掉 fetch 调用，页面不会重新加载。