Отправка форм

Последнее обновление: 23.11.2023

Одним из способов отправки данных на сервер представляют формы. По умолчанию Node.js не представляет встроенного функционала для получения данных отправленных форм. Например, пусть в проекте определена веб-страница index.html с формой отправки:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
<form action="user" method="post">
<p>
    <label>Имя:</label><br>
    <input name="username" />
</p>
<p>
    <label>Возраст:</label><br>
    <input name="userage" type="number" />
</p>
<input type="submit" value="Отправить" />
</form>
</body>
</html>

Здесь на форме определены два поля ввода - поле username для ввода имени и поле userage для ввода возраста. При нажатии на кнопку введенные данные уходят в запросе типа POST по адресу "/user". Посмотрим, как нам получить эти данные в приложении на Node.js.

При отправке тело запроса будет содержать данные в формате

имя_поля1=значение1&имя_поля2=значение2&имя_поляN=значениеN

Где имя поля представляет значение атрибута name поля ввода. То есть, чтобы получить отдельные поля со значениями, надо разбить тело запроса по символу &. А чтобы отделить имя поля от значения, надо выполнить дальнейшую разбивку по знаку равно =.

Обычно для парсинга отправленных форм применяются специальный пакеты или функционал различных фреймворков типа Express. Тем не менее при необходимости мы сами можем определить подобный функционал. Так, определим в файле app.js следующий код:

const http = require("http");
const fs = require("fs");
 
http.createServer(async (request, response) => {
       
    if(request.url == "/user"){
          
          let body = "";   // буфер для получаемых данных
         // получаем данные из запроса в буфер
          for await (const chunk of request) {
            body += chunk;
          }
        // для параметра name
        let userName = "";
        // для параметра age
        let userAge = 0;
        // разбиваем запрос на параметры по символу &
        const params = body.split("&");
        // проходим по всем параметрам и определяем их значения
        for(param of params){
            // разбиваем каждый параметр на имя и значение
            const [paramName, paramValue] = param.split("=");
            if(paramName === "username") userName = paramValue;
            if(paramName === "userage") userAge = paramValue;
        }
        response.end(`Your name: ${userName}  Your Age: ${userAge}`);
    }
    else{
        fs.readFile("index.html", (_, data) => response.end(data));
    }
}).listen(3000, ()=>console.log("Сервер запущен по адресу http://localhost:3000"));

При обработке запроса с помощью свойства request.url мы можем получить путь к ресурсу, к которому пришел запрос. Поскольку форма на веб-странице отправляет данные по адресу "/user", то здесь в начале обрабатываем запрос по этому адресу:

if(request.url == "/user"){

Для получения значений отправленной формы считываем тело запроса в переменную body:

let body = "";   // буфер для получаемых данных
// получаем данные из запроса в буфер
for await (const chunk of request) {
    body += chunk;
}

Теперь наша задача извлечь названия и значения полей формы. Для этого сначала разбиваем тело запроса на отдельные параметры

const params = body.split("&");

Далее проходим по всем параметрам и извлекаем их имена (имена полей форм) и их значения:

for(param of params){
    const [paramName, paramValue] = param.split("=");
    if(paramName === "username") userName = paramValue;
    if(paramName === "userage") userAge = paramValue;
}

Стоит отметить, что это естественно не универсальный парсинг и заточен под конкретную задачу - получения отправленных имени и возраста пользователя.

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

response.end(`Your name: ${userName}  Your Age: ${userAge}`);

В конце перейдем в консоли к папке сервера и запустим сервер

C:\app>node server.js
Сервер запущен по адресу http://localhost:3000

После запуска сервера мы можем перейти в браузере по адресу http://localhost:3000, нам отобразится страницас формой. Введем в нее какие-нибудь данные:

Отправка и получение форм в Node.js

Приложение Node.js получит данные и в ответ отправить строку:

Отправка и получение данных форм в Node.js

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850