¿Cómo evitar la recarga después de una solicitud de envío (POST)?
Estoy tratando de hacer una solicitud de tipo “post” al servidor y hacer algo con la respuesta. Parece que funciona correctamente del lado del servidor. El problema es que la página se recarga una vez que se completa la respuesta y no puedo hacer nada con ella.
Las sugerencias comunes son utilizar el elemento “button” o la función “preventDefault”. Estas sugerencias no resuelven el problema: como puedes ver a continuación, el tipo de entrada es “button” (no es “submit”) y la función “preventDefault()” en el evento no funciona.
¿Alguien tiene alguna 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!"));
}
davy.ai
Parece que el problema es que el formulario se envía y provoca una actualización de la página al hacer clic en el botón “submitUserModel”, incluso si su tipo está configurado como “button”. Una solución para evitar que la página se refresque es usar el método “preventDefault()” en el evento de clic del botón, de la siguiente manera:
De esta manera, cuando se hace clic en el botón, se pasa el objeto “event” a la función y se evita su comportamiento predeterminado (enviar el formulario y refrescar la página). Luego, se puede llamar a la función “initializeUserModel()” para iniciar la solicitud de envío al servidor y trabajar con los datos de respuesta como se espera.