JSON и AJAX

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

JSON представляет один из самых популярных форматов хранения и передачи данных, и Express имеет все возможности для работы с JSON.

Получение данных в формате 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

Запустим приложение и обратимся к корню веб-сайта. Введем какие-нибудь данные и после отправки в консоли браузера отобразится ответ сервера:

AJAX и JSON в Express и Node.js

Следует отметить, что вместо явного создания объекта парсинга 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

Для отправки данных в формате 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>

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

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