Express: AJAX POST - redirect - GET. Не работает

@ЗасланеЦ · Регистрация: 11.12.2012

Студворк — интернет-сервис помощи студентам

Добрый день

Как делать правильно перенаправление с помощью AJAX POST + express вместо использования submit-кнопки?

Вот мой пример:

test.js

JavaScript
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
var express = require('express');
var body_parser = require('body-parser');
 
var app = express();
 
app.use(body_parser.json());
app.use(body_parser.urlencoded({extended: true}));
 
app.get('/one', function (req, res)
 {
  res.sendFile(__dirname + '/testpage.html');
 });
 
app.post('/one', function (req, res)
 {
  console.log(req.body);
  res.redirect('/two');
 });
 
app.get('/two', function (req, res)
 {
  res.send('good bye');
 });
 
app.listen(80, function ()
 {
  console.log('Server was started successfully.');
 });

testpage.html

JavaScript
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
<!DOCTYPE html>
 
<html>
 <head>
  <title>test</title>
  <meta charset="utf-8" />
 </head>
 
 <body>
  <form method="POST" action="/one">
   <input type="hidden" name="data" value="hello" />
   <input type="submit" value="SUBMIT" />
  </form>
  
  <input type="button" id="clicker" value="click me" />
  
  <script>
   let btn = document.getElementById('clicker');
   
   btn.addEventListener('click', function (e)
    {
     let xhr = new XMLHttpRequest();
     
     xhr.open('POST', '/one');
     xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
     xhr.send(JSON.stringify({data: 'hello'}));
     
     xhr.addEventListener('readystatechange', function ()
      {
       if (this.readyState == 4)
        {
//         window.location.href = '../two';
         /*
         document.open();
         document.write(this.responseText);
         document.close();
         */
        }
      });
    });
  </script>
 </body>
</html>

Суть такова:

1. Запрашиваем localhost/one и нам сервер присылает страничку testpage.html
2. На ней есть кнопка "Click Me". Кликаем по ней и AJAX-ом отправляются JSON-данные методом POST на сервер
3. На сервере эти данные выводятся в консоль и далее перенаправляем клиента на localhost/two (здесь может быть принятие решения куда его направить).
4. При этом браузер отправляет GET запрос на localhost/two где ему сервер отсылает обычную строчку ...
5. ... и здесь проблема

В Firebug я вижу что страница успешно прислана (GET 200) и вижу саму страницу с ее html-кодом. Но в браузере она не загружается.

Сначала пробовал написать window.location.href = '../two' страница загружается исправно. Но тогда получается что она загружается уже повторно с сервера. По моему это неправильно.

Потом пробовал заменить DOM методом document.write. Страница рисуется но window.location (и строка заголовка не меняются) - тоже не хорошо.

PS

Что интересно - так перенаправление работает:

get get

JavaScript
1
2
3
4
5
6
7
8
9
app.get('/one', function (req, res)
 {
  res.redirect('/two');
 });
 
app.get('/two', function (req, res)
 {
  res.send('good bye');
 });

А еще для сравнения поместил кнопку SUBMIT с формой для сравнения. Там тоже редирект почему то работает как надо.

@pvzh · 09.03.2019, 23:48

Добрый вечер!
Правильнее на POST запрос ответить статусом 200 и телом {"redirect":"/two"}. А на клиенте проверить статус и выполнить window.location.href = response.redirect.

@MrOnlineCoder · 10.03.2019, 14:11

Сообщение от ЗасланеЦ

2. На ней есть кнопка "Click Me". Кликаем по ней и AJAX-ом отправляются JSON-данные методом POST на сервер
3. На сервере эти данные выводятся в консоль и далее перенаправляем клиента на localhost/two (здесь может быть принятие решения куда его направить).

Это противоречит цели использования AJAX. Когда вы делаете AJAX запросы, сервер выступает в роли раздатчика данных и не более - визуальные действия должен выполнять клиент. Поэтому вам нужно сделать как сказал pvzh - перенаправить скриптом. Но это тоже неверно, представьте что вы используете например API Google Maps, запрашиваете какие то данные а гугл вам говорит - "здесь этого нет, обращайтесь сюда - /api/getInfo/foo...." - и вы вынуждены делать лишний запрос и лишнюю проверку на наличие поля redirect в ответе.

@muxahuk1214 · 10.03.2019, 20:49

не используйте ajax в случае если вам нужно куда-то редиректнуть пользователя..

@ЗасланеЦ · 11.03.2019, 00:57 **[ТС]**

pvzh, так и сделал - заработало наконец

test.js

JavaScript
1
2
3
4
5
6
app.post('/one', function (req, res)
 {
  console.log(req.body);
  res.status(200).send(JSON.stringify({redirect: '../two'}));
//  res.redirect('/two'); // Долой.
 });

testpage.html

JavaScript
1
2
3
4
5
6
7
xhr.addEventListener('readystatechange', function ()
      {
       if (this.readyState == 4 && this.status == 200)
        {
         window.location.href = JSON.parse(this.responseText).redirect;
        }
      });

Но тогда зачем нужен Редирект если он не работает? Или его должен обеспечивать сам клиент (браузер)?

@pvzh · 11.03.2019, 09:55

AJAX - это про получение или отправку порции данных без перезагрузки страницы. А понятие редирект относится к получению страницы целиком. Метод POST через форму работает потому как это не AJAX, запрашивается как-раз таки целая страница.

@MrOnlineCoder · 11.03.2019, 22:40

Сообщение от ЗасланеЦ

res.status(200).send(JSON.stringify({red irect: '../two'}))

В express для этого есть вспомогательный метод:

JavaScript
1
2
3
res.json({
  redirect: '../two'
});

Сообщение от ЗасланеЦ

Или его должен обеспечивать сам клиент (браузер)?

При выполнении AJAX запроса - обработкой ответа от сервера занимается ваш скрипт.
При отправке формы - браузер сам грузит новую страницу, которую он получит в ответ, соответственно, заголовок редиректа он обрабатывает сам.

@ЗасланеЦ · 15.03.2019, 15:04 **[ТС]**

MrOnlineCoder, muxahuk1214, pvzh, спасибо за ответы.

Переделал свой проект с использованием кнопок Submit, а AJAX приберегу для чата. Никаких проблем пока не возникает.

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

Express: AJAX POST - redirect - GET. Не работает

Решение

Решение

@pvzh 98 / 64 / 36 Регистрация: 04.12.2018 Сообщений: 158
	09.03.2019, 23:48
	Сообщение было отмечено ЗасланеЦ как решение Решение Добрый вечер! Правильнее на POST запрос ответить статусом 200 и телом `{"redirect":"/two"}`. А на клиенте проверить статус и выполнить `window.location.href = response.redirect`. 1

@muxahuk1214 Coding is art 540 / 423 / 154 Регистрация: 04.09.2013 Сообщений: 1,066
	10.03.2019, 20:49
	не используйте ajax в случае если вам нужно куда-то редиректнуть пользователя.. 1

@pvzh 98 / 64 / 36 Регистрация: 04.12.2018 Сообщений: 158
	11.03.2019, 09:55
	AJAX - это про получение или отправку порции данных без перезагрузки страницы. А понятие редирект относится к получению страницы целиком. Метод POST через форму работает потому как это не AJAX, запрашивается как-раз таки целая страница. 1

@ЗасланеЦ 2 / 2 / 1 Регистрация: 11.12.2012 Сообщений: 94
	15.03.2019, 15:04 [ТС]
	MrOnlineCoder, muxahuk1214, pvzh, спасибо за ответы. Переделал свой проект с использованием кнопок Submit, а AJAX приберегу для чата. Никаких проблем пока не возникает. 0