Estoy implementando un chat, creando una ventana de registro, y es necesario que los datos del formulario se envíen al servidor, para que luego se envíen al lado del cliente para que se muestren en la lista de clientes. Pero por alguna razón no llegan los datos del formulario, cual es el problema? Aquí está el formulario index.html:
<form class = "FORM" action="/" method="post"> <label>Username</label><br> <input type = "TEXT" class = "CHECK" autocomplete="off" name="Username"> <button type = "submit" class="BTN" onclick="redirect()">Send</button> </form>Aquí está el servidor en express index.js
const express = require('express'); const app = express(); const db = require('./database/database'); // подключаемся к бд const urlencodedParser = express.urlencoded({extended: false}); const http = require('http'); const server = http.createServer(app); const {Server} = require('socket.io'); const io = new Server(server); const port = 3000; let id = 0; let users = {}; app.use(express.static(__dirname)); app.get('/', (request, response ) => { response.sendFile(__dirname + '/index.html'); }); io.on('connection', (socket) => { app.post("/", urlencodedParser, function (request, response) { if(!request.body) return response.sendStatus(400); console.log(request.body); //response.send(`${request.body.userName} - ${request.body.userAge}`); }); .....¿Por qué los datos no llegan del formulario al servidor?
Tendría que hacer una solicitud de publicación de axios al punto final.
si está utilizando javascript vainilla, también debe agregar eventlistener al formulario.
const form = document.getElementsByClassName("FORM"); form.addEventListener("submit", (event) => { event.preventDefault(); const userName = event.target.Username.value; if (!userName) alert("Username is required"); else { axios .post( "http://localhost:3000/", { userName }) .then((response) => { console.log(response.data); /*depending on what response you get from the server, you may want to use .map() method to display all the usernames*/ }) .catch((error) => console.log(error)); event.target.reset(); } })