POST-запросы и отправка форм¶

При оправке каких-то сложных данных обычно используются формы. Рассмотрим, как получать отправленные данные в Express.

Для получения данных форм из запроса необходимо использовать специальный пакет body-parser. Поэтому вначале добавим его в проект с помощью команды

1	`npm install body-parser --save`

Определим в папке проекта новый файл register.html:

<!DOCTYPE html>
<html>
    <head>
        <title>Регистрация</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <h1>Введите данные</h1>
        <form action="/register" method="post">
            <label>Имя</label><br />
            <input
                type="text"
                name="userName"
            /><br /><br />
            <label>Возраст</label><br />
            <input
                type="number"
                name="userAge"
            /><br /><br />
            <input type="submit" value="Отправить" />
        </form>
    </body>
</html>

Здесь определены два поля для ввода имени и возраста пользователя. После нажатия на кнопку данные будут уходить по адресу /register.

В файле app.js определим следующий код:

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

const app = express();

// создаем парсер для данных application/x-www-form-urlencoded
const urlencodedParser = bodyParser.urlencoded({
    extended: false,
});

app.get('/register', urlencodedParser, function (
    request,
    response
) {
    response.sendFile(__dirname + '/register.html');
});
app.post('/register', urlencodedParser, function (
    request,
    response
) {
    if (!request.body) return response.sendStatus(400);
    console.log(request.body);
    response.send(
        `${request.body.userName} - ${request.body.userAge}`
    );
});

app.get('/', function (request, response) {
    response.send('Главная страница');
});

app.listen(3000);

Прежде всего для получения отправленных данных необходимо создать парсер:

const urlencodedParser = bodyParser.urlencoded({
    extended: false,
});

Поскольку данные отправляются с помощью формы, то для создания парсера применяется функция urlencoded(). В эту функцию передается объект, устанавливающий параметры парсинга. Значение extended: false указывает, что объект - результат парсинга будет представлять набор пар ключ-значение, а каждое значение может быть представлено в виде строки или массива.

При переходе по адресу /register будет срабатывать метод app.get, который отправит пользователю файл register.html.

Так как данные отправляются с помощью метода POST, то для обработки определяем функцию app.post("/register",...). Первый параметр функции - адрес, на который идет отправка - /register. Стоит отметить, что в данном случае с одинм адресом /register связаны две функции, только одна обрабатывает запросы get, а другая - запросы post. Второй параметр - выше созданный парсер. Третий параметр - обработчик:

app.post('/register', urlencodedParser, function (
    request,
    response
) {
    if (!request.body) return response.sendStatus(400);
    console.log(request.body);
    response.send(
        `${request.body.userName} - ${request.body.userAge}`
    );
});

Для получения самих отправленных данных используем выражения типа request.body.userName, где request.body инкапсулирует данные формы, а userName - ключ данных, который соответствует значению атрибута name поля ввода на html-странице:

<input type="text" name="userName" />

Запустим приложение и обратимся к странице register.html:

4.20.png

После отправки введенные данные будут получены в функции app.post("/register",...), которая выведет результат обработки:

4.21.png

POST-запросы и отправка форм¶

Комментарии