es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Cómo evitar que la página se actualice después de una solicitud de publicación fetch de JavaScript?

Cómo evitar que la página se actualice después de una solicitud de publicación fetch de JavaScript?

26 Jul, 2023 Programación

Estoy enviando un archivo desde el cliente a una API de Flask.
He intentado hacer e.preventDefault(), e.stopPropagation() y return false en “onsubmit” del formulario, pero aún se actualiza la página.
Necesito que la página web conserve alguna información que la API devolverá, pero desaparece después de la actualización de la página.
He intentado usar el almacenamiento local para almacenar los datos, pero desaparece cuando se actualiza la página. Perdón si es una pregunta tonta 🙏

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





Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para evitar que la página se actualice cuando se envía el formulario, se pueden seguir los siguientes pasos:

    1. En el archivo HTML, agregar “return false” al atributo “onsubmit” del formulario. Esto evitará el comportamiento predeterminado de enviar el formulario y actualizar la página.

    2. En el archivo JavaScript, agregar un event listener al botón de carga (o al formulario mismo) para el evento “submit”. Luego, llamar a la función “sendFile” y usar la función “event.preventDefault()” para evitar el comportamiento predeterminado de enviar el formulario y actualizar la página.

    Ejemplo:

    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));
};

form.addEventListener("submit", (event) => {
  event.preventDefault();
  sendFile();
});

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

    En cuanto a retener la información enviada desde la API, se puede utilizar el almacenamiento local (local storage), pero los datos aún pueden desaparecer si se actualiza la página. Una opción alternativa es actualizar dinámicamente la página web con los nuevos datos utilizando JavaScript.

Comments are closed.