Есть ли событие окончания обработки формы (не ajax)?

Question

[l4m3r]

Есть форма которая отправляет файл, а сервер возвращает другой файл. То есть аяксом отправлять проблематично. Занимает обработка секунд 30. Хочу показывать какой-нибудь лоадер крутящийся на весь экран пока идёт обработка.
Единственное, что on submit я могу только показывать его. А как узнать, что запрос выполнился?

Answer 1

[Rsa97]

А в чём проблема отправить и получить файл через Ajax?
В HTML создаётся пустая ссылка:

<a href='' id='report-link' download style='display: none;'></a>

В JS:

var data = new FormData();
data.append('file', document.getElementById('file').files[0]);
var post = new XMLHttpRequest();
post.open('POST', 'where/to/send', true);
post.onreadystatechange = function() {
  if (post.readyState != 4) {
    return;
  }
  hideSpinner();
  switch (post.status) {
    case 200:
      var a = document.getElementById('report-link');
      a.href = '/get/file/from&id=' + post.responseText;
      a.click();
      break;
    ...
  }
}
showSpinner();
post.send(data);

То бишь, отправили файл через Ajax, дождались ответа, подставили его идентификатор в ссылку и кликнули по ней.

Comments

[l4m3r]

Отправить - ни в чем. А получить как?

[Rsa97]

l4m3r, Дополнил ответ

[l4m3r]

Rsa97, спасибо :) Тоже уже думал уже сейчас над этим.

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

[ThunderCat]

l4m3r, ничего не мешает сделать это без всяких ссылок, на сервере формируется файл, в качестве ответа аякс запросу отдается что-то типа:

header('Content-Type: text/html; charset=UTF-8');
                    header('Expires: Mon, 30 Jul 1997 05:00:00 GMT');
                    header('Cache-Control: no-store, no-cache, must-revalidate');
                    header('Cache-Control: post-check=0, pre-check=0', FALSE);
                    header('Pragma: no-cache');
                    header('Content-transfer-encoding: binary');
                    header('Content-Disposition: attachment; filename='.$name);
                    header('Content-Type: application/zip');
                    readfile($filepath);

[l4m3r]

спасибо попробую

Answer 2

[ThunderCat]

единственный рабочий вариант - на сервере по окончании работы скрипта писать в сессию флаг "готово", с фронта каждые N секунд отправлять аякс запрос на скрипт который проверяет наличие флага в сессии.

Comments

[Rsa97]

Не единственный, можно ещё и вебсокеты прикрутить или лонгпуллы. Ну или таки отправлять файл аяксом.

[l4m3r]

Rsa97, а получать как файл аяксом?

[ThunderCat]

l4m3r, так вопрос вроде не про то

[l4m3r]

ThunderCat,

Есть форма которая отправляет файл, а сервер возвращает другой файл. То есть аяксом отправлять проблематично.

Так-то конечно аяксом лучше.

[ThunderCat]

Rsa97,

Не единственный, можно ещё и вебсокеты прикрутить или лонгпуллы.

это понятно(хотя крутить их ради одной такой задачи я бы не стал). И вопрос вроде не о отсылке аяксом, а о получении СОБЫТИЯ для остановки спинера.

[ThunderCat]

l4m3r,
вот аяксом, на сервере пропишите после формирования нужного файла:

header('Content-Type: text/html; charset=UTF-8');
                    header('Expires: Mon, 30 Jul 1997 05:00:00 GMT');
                    header('Cache-Control: no-store, no-cache, must-revalidate');
                    header('Cache-Control: post-check=0, pre-check=0', FALSE);
                    header('Pragma: no-cache');
                    header('Content-transfer-encoding: binary');
                    header('Content-Disposition: attachment; filename='.$name);
                    header('Content-Type: application/zip');
                    readfile($filepath);

никакой ссылки не нужно, все само скачается по завершении формирования файла на сервере.

Answer 3

[Владимир]

https://developer.mozilla.org/en-US/docs/Web/API/F...

var xhr = new XMLHttpRequest();
xhr.open("post", formElement.action);
xhr.send(new FormData(formElement));

https://learn.javascript.ru/xhr-onprogress

Comments

[l4m3r]

Вы название темы видели? Как я аяксом файлы получу?

Answer 4

[Дима Долготер]

https://learn.javascript.ru/events-change#sobytie-input

Comments

[l4m3r]

Пожаловался на ваш бесполезный ответ. Даже название темы не прочитали.

Answer 5

[M-ka]

ну описана ситуация, мол запрос ответ повторный запрос, вполне обычная ситуация...
отправил первый запрос, отобразил лоадер, дальше дождался ответа с нужным контентом, обработал распихал, спрятал лоадер... ну а по пути точки выхода для ошибок сделать, что бы убрать лоадер.... обычное действие