Перейти к содержанию

JSON и AJAX

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

Пусть в папке проекта имеется файл index.html со следующим кодом:

<!DOCTYPE html>
<html>
  <head>
    <title>Регистрация</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>Введите данные</h1>
    <form name="registerForm">
      <label>Имя</label><br />
      <input type="text" name="userName" /><br /><br />
      <label>Возраст</label><br />
      <input type="number" name="userAge" /><br /><br />
      <button type="submit" id="submit">Отправить</button>
    </form>
    <script>
      document.getElementById('submit').addEventListener('click', function(e) {
        e.preventDefault()
        // получаем данные формы
        let registerForm = document.forms['registerForm']
        let userName = registerForm.elements['userName'].value
        let userAge = registerForm.elements['userAge'].value
        // сериализуем данные в json
        let user = JSON.stringify({ userName: userName, userAge: userAge })
        let request = new XMLHttpRequest()
        // посылаем запрос на адрес "/user"
        request.open('POST', '/user', true)
        request.setRequestHeader('Content-Type', 'application/json')
        request.addEventListener('load', function() {
          // получаем и парсим ответ сервера
          let receivedUser = JSON.parse(request.response)
          console.log(receivedUser.userName, '-', receivedUser.userAge) // смотрим ответ сервера
        })
        request.send(user)
      })
    </script>
  </body>
  <html></html>
</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) {
  console.log(request.body)
  if (!request.body) return response.sendStatus(400)

  response.json(request.body) // отправляем пришедший ответ обратно
})

app.get('/', function(request, response) {
  response.sendFile(__dirname + '/index.html')
})

app.listen(3000)

Прежде всего для получения данных в формате json необходимо создать парсер с помощью функции json:

const jsonParser = express.json()

В реальности данный парсер будет использовать модуль bodyParser, который использовался нами ранее для парсинга данных отправленной формы.

И поскольку с клиентом мы взаимодействуем через формат json, то данные клиенту отправляются с помощью метода response.json():

app.post('/user', jsonParser, function(request, response) {
  console.log(request.body)
  if (!request.body) return response.sendStatus(400)

  response.json(request.body) // отправляем пришедший ответ обратно
})

Следует отметить, что в принципе мы можем отправить объект и с помощью стандартного метода response.send(request.body). В реальности метод response.json() устанавливает для заголовка Content-Type значение application/json, серилизует данные в json с помощью функции JSON.stringify() и затем отправляет данные с помощью response.send().

Для получения данных, как и в случае с формами, используются выражения типа request.body.userName, где request.body инкапсулирует данные формы, а userName - ключ данных.

При обращении к корню веб-приложения пользователю будет отправляться содержимое файла index.html с формой ввода данных.

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

4.22.png