JSON представляет один из самых популярных форматов хранения и передачи данных, и Express имеет все возможности для работы с JSON.
Пусть в папке проекта имеется файл index.html со следующим кодом:
<!DOCTYPE html> <html> <head> <title>METANIT.COM</title> <meta charset="utf-8" /> </head> <body> <h1>Введите данные</h1> <form id="myForm" action="/user" method="post"> <p> <label>Имя</label><br> <input type="text" name="userName" /> </p> <p> <label>Возраст</label><br> <input type="number" name="userAge" /> </p> <input type="submit" value="Отправить" /> </form> <script> // данные для отправки const myForm = document.getElementById("myForm"); myForm.addEventListener("submit", async (e)=>{ e.preventDefault(); // данные для отправки const username = myForm.userName.value; const userage = myForm.userAge.value; const response = await fetch("/user", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({name: username, age: userage}) }); // из объекта ответа извлекаем текст ответа const responseText = await response.text(); console.log(responseText); }); </script> </body> </html>
Здесь определена форма с двумя полями для ввода имени и возраста пользователя. При отправке формы с помощью обработчика нажатия перехватываем ее отправку. В функции обработчика получаем значения ее полей и сериализуем в объект json, который затем отправляется на сервер с помощью ajax на адрес "/user".
Далее определим в главном файле приложения - в app.js код, который бы принимал отправленные данные:
const express = require("express"); const app = express(); // создаем парсер для данных в формате json const jsonParser = express.json(); app.post("/user", jsonParser, function (request, response) { const user = request.body; console.log(user); if(!user) return response.sendStatus(400); const responseText = `Your name: ${user.name} Your age: ${user.age}`; response.send(responseText); // отправляем ответ }); app.get("/", function(request, response){ response.sendFile(__dirname + "/index.html"); }); app.listen(3000);
Прежде всего для получения данных в формате json необходимо создать парсер с помощью функции json:
const jsonParser = express.json();
Далее jsonParser применяется для автоматического парсинга тела запроса в объект json, а клиенту в ответ отправляется строка, созданная на основе присланных данных:
app.post("/user", jsonParser, function (request, response) { const user = request.body; console.log(user); if(!user) return response.sendStatus(400); const responseText = `Your name: ${user.name} Your age: ${user.age}`; response.send(responseText); // отправляем ответ });
В данном случае request.body
будет представлять посланный из клиента объект json. Поскольку объект, отправленный из клиента, содержит свойства name и age,
то мы их можем получить с помощью выражений request.body.name
и request.body.age
Запустим приложение и обратимся к корню веб-сайта. Введем какие-нибудь данные и после отправки в консоли браузера отобразится ответ сервера:
Следует отметить, что вместо явного создания объекта парсинга jsonParser мы можем встроить автоматический парсинг в JSON в конвейер обработки запроса с помощью метода:
app.use(express.json());
То есть в этом случае файл app.js будет выглядеть следующим образом:
const express = require("express"); const app = express(); // устанавливаем автоматически парсинг тела запроса в json app.use(express.json()); app.post("/user", function (request, response) { const user = request.body; console.log(user); if(!user) return response.sendStatus(400); const responseText = `Your name: ${user.name} Your age: ${user.age}`; response.send(responseText); // отправляем пришедший ответ обратно }); app.get("/", function(_, response){ response.sendFile(__dirname + "/index.html"); }); app.listen(3000);
Для отправки данных в формате json применяется метод response.json()
. В принципе мы можем отправить объект и с помощью стандартного метода
response.send(request.body)
. Однако метод response.json()
также устанавливает для заголовка "Content-Type" значение "application/json", сериализует данные в json с помощью
функции JSON.stringify()
и затем отправляет данные с помощью response.send()
.
Так, определим в файле app.js:
const express = require("express"); const app = express(); // устанавливаем автоматически парсинг тела запроса в json app.use(express.json()); app.post("/user", function (request, response) { const user = request.body; console.log(user); if(!user) return response.sendStatus(400); const responseText = `Your name: ${user.name} Your age: ${user.age}`; response.json({message: responseText}); // отправляем данные в формате json }); app.get("/", function(request, response){ response.sendFile(__dirname + "/index.html"); }); app.listen(3000);
Здесь отправляются те же данные, что и в предыдущем примере, только при отправке они помещаются в свойство message отправляемого объекта. А для отправки объекта применяется
метод response.json
.
В коде клиента - на странице index.html получим ответ сервера в виде json:
<!DOCTYPE html> <html> <head> <title>METANIT.COM</title> <meta charset="utf-8" /> </head> <body> <h1>Введите данные</h1> <form id="myForm" action="/user" method="post"> <p> <label>Имя</label><br> <input type="text" name="userName" /> </p> <p> <label>Возраст</label><br> <input type="number" name="userAge" /> </p> <input type="submit" value="Отправить" /> </form> <script> // данные для отправки const myForm = document.getElementById("myForm"); myForm.addEventListener("submit", async (e)=>{ e.preventDefault(); // данные для отправки const username = myForm.userName.value; const userage = myForm.userAge.value; const response = await fetch("/user", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({name: username, age: userage}) }); // получаем присланный объект в формате json const data = await response.json(); console.log(data.message); }); </script> </body> </html>