Estoy tratando de hacer una solicitud de publicación al servidor y hacer algo con la respuesta. Las cosas parecen funcionar en el lado del servidor. El problema es que la página se vuelve a cargar al completar la respuesta y no puedo hacer nada con la respuesta.
Las sugerencias comunes son usar button o preventDefault . Estas sugerencias no resuelven el problema: como puede ver a continuación, el tipo de entrada es button (no submit ) y preventDefault() en el evento no funciona.
¿Alguien tiene una idea de lo que me estoy perdiendo?
<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!")) }Llegué al fondo de esto. Resulta que el problema se debió a VS Live Server, que estaba detectando un cambio en la carpeta y cargando la aplicación en caliente. El cambio se debió al backend, en la misma carpeta, guardando un registro. Realmente una tontería perderse...
Si desea activar su función cuando se envía el formulario, puede usar el detector de eventos "onsubmit" disponible en los formularios HTML.
Entonces haría onsubmit="initializeUserModel(event)" . Le pasa el objeto de evento para que pueda llamar a event.preventDefault() en la función y evitar que la página se vuelva a cargar.
Cambie su entrada a type="submit" (o conviértalo en un botón de type="submit") o el envío del formulario no se activará.
<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!")); }