Estoy trabajando con express, mangosta y JavaScript para crear una aplicación de una sola página. El código funciona, excepto que no quiero mantener la información del formulario en la URL con la solicitud de publicación. Intenté redirigir pero terminó en bucle, creo.
No estoy usando form method="post" porque redirigirá la página y esto es un SPA. Me gustaría no mostrar esto ni redirigir desde la URL a la misma página sin la información de la consulta.
http://localhost:2000/ ?firstName=John&lastName=James&age=40
Este es el formulario (index.html) --
<form id="formId"> <input type="text" name="firstName"> <input type="text" name="lastName"> <input type="text" name="age"> <button type="submit" onclick="processForm(event)">Save</button> </form>Aquí está el JS para el manejo de formularios:
function processForm(event){ var formData = new FormData(document.forms[0]) const queryString = Object.fromEntries( Array.from(formData.keys()).map(key => [ key, formData.getAll(key).length > 1 ? formData.getAll(key) : formData.get(key)])); postData(queryString); } async function postData(data) { fetch('/people', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(data), }) .then(response =>response.json()) .then(data => console.log('Success:', data)) .catch((error) => { console.error('Error:', error); }); };Dado que esta es una aplicación SPA y desea manejar el formulario a través de AJAX, debe detener el controlador de formulario predeterminado para la página (que es una redirección).
Puedes hacerlo usando event.preventDefault()
Así que tu código debería verse así:
function processForm(event){ event.preventDefault(); ...rest of the form handling logic }Además, probablemente desee utilizar el evento form.onsubmit en lugar del evento button.onclick para enviar los datos.