JavaScript fetch post 请求后如何防止页面刷新？

Question

我正在将文件从客户端发送到 Flask API。我试过为表单上的“onsubmit”做 e.preventDefault()、e.stopPropagation() 和 return 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了解更多信息

JavaScript fetch post 请求后如何防止页面刷新？

How to prevent page from refreshing after JavaScript fetch post request?

html

javascript

api

fetch

python-requests

Javascript

HTML