Пусть у нас есть форма, отправляющаяся на текущую страницу:
<form method="GET">
<input name="test1">
<input name="test2">
<input type="submit">
</form>
Напишем обработчик этой формы:
app.get('/', function(req, res) {
res.render('result');
});
Как вы уже знаете, в нашем случае обработчик выполнится два раза: при первом заходе на страницу и при отправке формы. Давайте напишем условие, разделяющее эти две ситуации внутри нашего обработчика.
Очевидно, что для проверки нам нужно использовать
req.query:
app.get('/', function(req, res) {
console.log(req.query); // выведет {} или объект с данными
res.render('result');
});
Есть, однако, проблема. В req.query
всегда находится объект - или пустой, или
заполненный. А объекты всегда равны true.
Поэтому следующая проверка не будет работать:
app.get('/', function(req, res) {
if (req.query) {
res.render('form');
} else {
res.render('result');
}
});
Давайте сделаем работающую проверку.
Первый вариант
Можно проверять наличие каждого поля в объекте с результатом:
app.get('/', function(req, res) {
if (req.query.test1 && req.query.test2) {
res.render('form');
} else {
res.render('result');
}
});
Этот вариант, однако, имеет недостатки. Написанная
нами проверка не пропустит пустое значение
инпута, так как оно приводится к false.
Исправим проблему:
app.get('/', function(req, res) {
if (req.query.test1 !== undefined && req.query.test2 !== undefined) {
res.render('form');
} else {
res.render('result');
}
});
Однако, способ все равно остается неудобным, так как в проверке нужно перечислить все инпуты формы. Получится, что если у нас пять инпутов - то в условие нужно будет проверять все эти пять инпутов. Неудобно.
Второй вариант
Описанное неудобство имеет классическое решение - нужно дать кнопке отправке имя:
<form action="" method="GET">
<input name="test1">
<input name="test2">
<input type="submit" name="submit">
</form>
В этом случае нам нет нужды проверять каждое поле, чтобы узнать, была ли форма отправлена. Просто проверим наличие нашей кнопки:
app.get('/', function(req, res) {
if (req.query.submit) {
res.render('result');
} else {
res.render('form');
}
});
Практические задачи
С помощью формы спросите у пользователя пять чисел. После отправки формы выведите на экран сумму этих чисел.