JavaScript 获取发布请求后如何防止页面刷新？

Posted 2023-03-15

【中文标题】JavaScript 获取发布请求后如何防止页面刷新？

【英文标题】：How to prevent page from refreshing after JavaScript fetch post request?

【发布时间】：2022-01-22 20:43:13

【问题描述】：

我正在从客户端向 Flask API 发送一个文件。 我试过做 e.preventDefault()、e.stopPropagation()，并在表单上为“onsubmit”返回 false，但它仍然刷新页面 我需要网络来保存 API 将发回的一些信息，但在页面刷新后它会消失。我尝试使用本地存储来存储数据，但是当页面刷新时它就消失了。对不起，如果这是一个愚蠢的问题：祈祷：

javascript

const form = document.querySelector("#upload-form");
const uploadBtn = document.querySelector("#upload-btn");
const uploadInp = document.querySelector("#upload-input");

const sendFile = async () => 
  let formData = new FormData();
  formData.append("file", uploadInp.files[0]);
  await fetch(apiPOST, 
    method: "POST",
    body: formData,
  )
    .then((res) => res.json())
    .then((json) => 
      console.log(json);
    )
    .catch((err) => console.log(err));
;

uploadBtn.addEventListener("click", (e) => 
  e.preventDefault();
  sendFile();
);

html

<form id="upload-form" enctype="multipart/form-data" method="post" onsubmit="return false">
     <label for="upload-input" class="btn">Upload File</label>
     <input type="file" id="upload-input" name="upload-input" accept=".pptx"/>
     <!-- <button id="upload-btn">Upload</button> -->
     <input type="submit" id="upload-btn" value="Upload" />
</form>

【问题讨论】：

附注控制台在重新加载之前记录 json 响应半秒

【参考方案1】：

你应该从表单提交属性调用 preventDefault 方法，而不是你的按钮。

查看this answer了解更多信息

【讨论】：

感谢它现在有效！显然，在表单执行某些操作后，vscode 实时服务器会重新加载站点