Отправка данных формы с помощью fetch()
Рассмотрим пример отправки данных формы на сервер с помощью fetch() методом POST, и обработку этих данных сервером (Node.JS + Express).
Файл index.html
В файл index.html включим скрипт отправки данных запроса с помощью fetch() методом POST на сервер (данные отправляются в формате JSON).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Webpack App</title> <script type="module"> // Отправка данных формы let formAuth = document.querySelector("#formAuth"); // Создадим объект FormData, в который добавим данные формы formAuth let formAuthData = new FormData(formAuth); // Преобразуем набор пар ключ/значение объекта FormData в формат JSON formAuthData = JSON.stringify(Object.fromEntries(formAuthData)); // Заменим обработчик submit формы formAuth.addEventListener("submit", function (e) { // отключим поведение по умолчанию e.preventDefault(); fetch("/fetchRouter", { method: "POST", body: formAuthData, }) // Отправим ответ в формате JSON (с правильным типом содержимого) .then((res) => res.json()) .then((res) => { // работа с результатом запроса (ответом сервера) let user = res; console.log(user); // можно сохранить в localStorage, преобразовав в JSON... localStorage.setItem("user", JSON.stringify(user)); // ... и извлечь, спарсив из JSON user = localStorage.getItem("user"); console.log("user", JSON.parse(user)); }); // искомый ответ }); </script> </head> <body> <form class="row g-3" id="formAuth" name="formAuth"> <div class="regLabel" id="regLabel"> <h4>Регистрация</h4> </div> <div class="enableFormAuth"> <label for="inputUserName" class="form-label" >Ваше имя (как к вам обращаться?)</label > <input type="text" class="form-control" id="inputUserName" name="name" value="имя" required /> </div> <label for="inputEmail" class="form-label">Адрес email</label> <input type="email" class="form-control" id="inputEmail" name="mail" value="email@gmail.com" required /> <div id="emailHelp" class="form-text"></div> <button id="send" type="submit" class="btn btn-primary"> Отправить запрос </button> </form> </body> </html> |
[свернуть]
Файл server.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
import express from "express"; import morgan from "morgan"; import fetchRouter from "./fetchRouter.js" const app = express(); const PORT = process.env.PORT || 3301; app.listen(PORT, () => { console.log(`Сервер запущен, порт ${PORT}`); }); /* Промежуточное ПО (middlewares) */ app.use(express.urlencoded({ extended: true })); app.use(express.static("./")); app.use(express.json()); app.use(express.text()); // Логирование с morgan if (app.get("env") == "production") { var accessLogStream = fs.createWriteStream( __dirname + "/logs/" + "access.log", { flags: "a" } ); app.use(morgan({ stream: accessLogStream })); } else { // логи в консоль при разработке ':method :url :status :res[content-length] - :response-time ms' app.use(morgan("dev")); } app.use(fetchRouter) |
[свернуть]
Файл fetchRouter.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { Router } from "express"; const fetchRouter = new Router(); fetchRouter.route("/fetchRouter").post((req, res) => { // Приняли req.body в формате JSON console.log("req fetchRouter", req.body); // Преобразуем из JSON в объект let reqBody = JSON.parse(req.body); // Добавим данные в объект ответа reqBody.addKeyAndValue = "addKeyAndValue"; // Отправим ответ res.send(reqBody); }); export default fetchRouter; |
[свернуть]