Уроки Node JS

#16 - Создание HTML-формы и получение данных

#16 - Создание HTML-формы и получение данных

В уроке мы создадим небольшую форму на HTML при помощи Bootstrap и научимся получать данные из формы. Также мы научимся взаимодействовать с данными полученными из формы.

Видеоурок

Полезные ссылки:


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


Получения данных

Сперва необходимо создать форму, при этом добавить к каждому полю атрибут name, так как без него данные не будут получены из полей формы. В теге <form> укажите метод отправки данных и url-адрес страницы для обработки запроса.


В главном JS-файле после подключения модуля body-parser используйте команду для создания переменной, которая будет получать данные из post-запроса:

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

Далее необходимо создать обработчик post-запроса:

// Проверяем уже post-запрос, вместо привычного get
app.post('/contact', urlencodedParser, function(req, res) {
	// Если данные не переданы, то возвращаем ошибку
	if (!req.body) return res.sendStatus(400);
	// Все данные из формы сохраняются в req.body
	console.log(req.body);
	// Можем вывести другую страницу и передать в нее все данные
	res.render('success', {data: req.body});
});

Создание успешной страницы точно такое же, как и ранее. Вы можете передать на такую страницу все данные и взаимодействовать с ними как захотите.

Исходный код

Весь код будет доступен после подписки на проект!

Онлайн редактор кода

Загрузка...

Задание к уроку

Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца

Также стоит посмотреть

Курс по React JS для начинающих
14 уроков
Создание приложения на React JS / Использование API
7 уроков
Изучение MongoDB / Работа с базой данных
8 уроков
Уроки Angular для начинающих
7 уроков
Изучение стека MEAN: MongoDB, Express, Angular и Node JS
10 уроков
Комментарии для сайта Cackle