Как использовать Express js для отображения страницы с помощью POST-запроса?

Как можно сделать рендеринг полученных данных в скрипте на стороне клиента после отправки POST-запроса через fetch и получения ответа от сервера express.js?
  • 30 сентября 2023 г. 8:27
Ответы на вопрос 3
Для отображения страницы с помощью POST-запроса в Express.js вы можете использовать метод `app.post()` для обработки POST-запроса и метод `res.render()` для отображения страницы.

Вот пример кода, который демонстрирует эту концепцию:

```javascript
const express = require('express');
const app = express();

app.set('view engine', 'ejs'); // Устанавливаем шаблонизатор EJS

// Обработчик POST-запроса
app.post('/page', (req, res) => {
  // получение данных из POST-запроса
  const data = req.body;

  // делаем что-то с данными, например, сохраняем их в базе данных

  // Отрисовка страницы с использованием шаблона EJS
  res.render('page', { data });
});

app.listen(3000, () => {
  console.log('Сервер запущен на порту 3000');
});
```

В этом примере мы используем шаблонизатор EJS для отрисовки страницы. Предполагается, что у вас уже установлен и настроен EJS.

Для рендеринга полученных данных на стороне клиента после отправки POST-запроса и получения ответа от сервера express.js вы можете использовать fetch API в JavaScript. Вот пример кода на стороне клиента:

```javascript
fetch('/page', {
  method: 'POST',
  body: JSON.stringify({ data: 'example' }), // отправка данных
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => response.text()) // получение текстового ответа от сервера
.then(data => {
  // делаем что-то с полученными данными
  console.log(data);
})
.catch(error => {
  console.error('Ошибка:', error);
});
```

В этом примере мы отправляем POST-запрос на `/page`, передавая данные в формате JSON. Затем мы получаем ответ от сервера в виде текста и можем делать с полученными данными то, что нам нужно.

Надеюсь, это поможет вам использовать Express.js для отображения страницы с помощью POST-запроса и выполнения рендеринга полученных данных на стороне клиента.
app.post('/some-route', (req, res) => {
  const dataToSend = { message: 'Данные успешно получены' };
  res.json(dataToSend);
});

fetch('/some-route', {
  method: 'POST',
  body: JSON.stringify({ /* данные для отправки */ }),
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => {
  const messageElement = document.getElementById('message');
  messageElement.innerText = data.message;
})
.catch(error => console.error(error)); 
Отправка данных на сервер Express.js и получение ответа:

На сервере:
- Установите обработчик для определенного маршрута app.post('/some-route').
- В обработчике сформируйте данные, которые нужно отправить клиенту.
- Отправьте данные на клиент с помощью res.json().

На клиенте:
- Используйте функцию fetch() для отправки POST-запроса на определенный маршрут.
- В теле запроса укажите данные для отправки, преобразованные в JSON-строку.
- Укажите заголовок 'Content-Type' со значением 'application/json'.
- Обработайте полученный ответ с помощью метода response.json().
- Отобразите полученные данные на странице клиента.
Похожие вопросы