Problema: estoy usando el siguiente código proporcionado por los miembros de StackOverflow. Me gusta el código, y desearía que funcionara, pero no funcionó, como explicaré:
El Propósito: Tome la entrada del lado del cliente, modifíquela con JavaScript, luego publique las variables modificadas en el lado del servidor (Node.js/Express).
El código (crédito a kwh ):
<body> <script type="text/javascript"> function customSubmit() { const name = document.getElementById('name').value + ' mock'; const city = document.getElementById('city').value + ' mock'; fetch('/posty', { method: 'POST', body: JSON.stringify({ name, city }) }) } </script> <form onsubmit="event.preventDefault(); customSubmit()"> <label for="name">Name: </label> <input id="name" name="name" type="text"> <label for="city">City: </label> <input id="city" name="city" type="text"> <button type="submit">submit</button> </form> </body>Tengo node.js y express.js en el servidor, y no he instalado node-fetch. Uso EJS como motor/archivo de plantillas para HTML y JS para el lado del cliente.
Código del lado del cliente:
app.post('/posty', (req,res) => { console.log(req.body) })que devuelve un objeto vacío en la consola (terminal de Linux):
{}Ahora si reemplazo la siguiente línea en el código:
<form onsubmit="event.preventDefault(); customSubmit()">con
<form action="/posty" method ="POST">Obtendré un objeto no vacío en la consola:
{ name: 'John', city: 'Berlin' }Sin embargo, esta no es la solución porque tengo que modificar el nombre de la persona y la ciudad antes de publicarlo en el lado del servidor (Node.js).
Discusión:
No he instalado node-fetch para node.js. Incluso, si lo instalé, tendría que importar el módulo en un archivo de servidor node.js que se ejecuta en el lado del servidor, no en el lado del cliente. No veo el sentido de instalar node-fetch en node.js para usar fetch() para POST en código HTML/JS que se ejecuta en un navegador compatible en el lado del cliente.
Tal vez falte algo en los códigos anteriores, ya sea en el lado del servidor o en el lado del cliente, o en ambos. Agradecería si alguien pudiera señalar eso. Además, quiero agradecer a kwh , que proporcionó el código limpio y compacto y me ayudó a organizar mi investigación para resolver el problema.
¿Usaste el cuerpo analizado antes de tus rutas? Puedes hacerlo con express.json()
app.use(express.json()) app.post('/posty', (req,res) => { console.log(req.body) })Gracias por sus respuestas. Encontré la solución con la ayuda de dos miembros de StackOverflow y una de las otras publicaciones en el foro de StackOverflow :
Tuve que agregar la siguiente línea al bloque fetch() en el código que sugirió kwh (Client-Side):
headers: new Headers({ "Content-Type": "application/json" })Además, agregué la siguiente línea al código en el lado del servidor como sugirió Ifaruki :
app.use(express.json())Entonces, faltaba una línea de código en el lado del servidor y otra en el lado del cliente. Necesitaba ambos.
Gracias de nuevo por tu rápida respuesta y tu ayuda.
javascript es mucho más rápido que el dom, es por eso que debe permitir que el navegador muestre el dom primero y luego ejecute el js. se hace por este
document.addEventListener("DOMContentLoaded", function (event) { // content is loaded const form = document.getElementById("id-of-yow-form"); form.addEventListener("submit", function (event) { event.preventDefault(); //add yow code }); });asegúrese de agregar la misma identificación a la etiqueta de formulario yow
<form id="id-of-yow-form"> <label for="name">Name: </label> <input id="name" name="name" type="text"> <label for="city">City: </label> <input id="city" name="city" type="text"> <button type="submit">submit</button> </form>