Простой способ получить данные формы из тега html <form> - PullRequest
3 голосов
/ 11 ноября 2019

Мне не удалось найти решение для простого получения данных из html-формы и их регистрации на консоли. Чего мне не хватает?

Вот мой HTML-код:

<!DOCTYPE html>
<html>
   <head>
      <title>User Login</title>
      <link rel="stylesheet" type="text/css" href="login.css">
   </head>
   <body>
      <div class="login_wrapper">
         <div class="login_box">
            <h1>User Login</h1>
            <form id="login_form" method="post" action="/">
               <p id="username">Username</p>
               <input type="text" name="username" placeholder="Enter Username">
               <input type="submit" name="" value="Login">
            </form>
         </div>
      </div>
   </body>
</html>

И мой код на стороне сервера:

var express = require('express');
const bodyParser = require("body-parser");

var app = express();

// middleware/routing
app.use(express.static(__dirname + '/public'));
app.use(bodyParser.urlencoded({ extended: true }));

app.get("/", function(request, response) {
    response.sendFile(__dirname + "/public/login.html");
});

app.post("/", (response, request)=>{
    console.log(request.params.username);
    // console.log("HI");
    response.end();
});

const port = process.env.PORT || 3000;
app.listen(port, () => {
    console.log(`Listening on port ${port}`);
});

Ошибка, которую я получаю, нажимая кнопку входа в системуэто: TypeError: Cannot read property 'username' of undefined

Я просто хочу записать все, что было введено в поле ввода для имени пользователя (я полагаю, это объект JSON?).

1 Ответ

1 голос
/ 11 ноября 2019

Проблема заключается в порядке запроса, параметрах ответа. Порядок обратный в вашем коде.

Кроме того, вы должны использовать request.body для доступа к опубликованным полям формы.

Ниже приведена модификация, необходимая для обработчика POST. Надеюсь, это поможет.

app.post("/", (request, response)=>{
    console.log(request.body.username);
    // console.log("HI");
    //response.end();
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...