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

Question

我正在从客户端向 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>

Answer 1

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

查看this answer了解更多信息