как сделать так, чтобы форма отправлялась синхронно БЕЗ JQUERY

Question

как сделать так, чтобы форма отправлялась синхронно БЕЗ JQUERY

1

У меня есть динамическая форма, которая на момент отправки должна быть синхронной, я уже знаю, что jquery делает это с помощью ajax, но в моем случае я не могу использовать jquery, возможно ли это сделать с помощью простого JS?

мой код:

    //I need put the loading GIF from here.

//create dynamic form
var formularioElement = document.createElement('form');
formularioElement.setAttribute('id', 'formSync');
formularioElement.method = 'POST';
formularioElement.action = 'ExportReport';

// Create input
var formularioInput = document.createElement('input');
formularioInput.type = 'text';
formularioInput.name = 'typeFile';
formularioInput.value = varTypeFile;

formularioElement.appendChild(formularioInput);

// add the form to DOM
document.body.appendChild(formularioElement);

// submit
formularioElement.submit();

   //Take off loading GIF from here

Мне нужно это, потому что вы хотите загрузить gif при загрузке отчета, и с моим текущим кодом GIF появляется и исчезает менее чем за секунду, даже если обработка в бэкэнд занимает более 1 минуты. Если у кого-то есть другое решение, я высоко ценю !

sergioBertolazzo 01 июнь 2017, в 14:17

Источник

Теги:

javascript

1 ответ

Ещё вопросы

Matt Styles · Accepted Answer · 2017-06-01T09-22-00.000Z

jQuery не делает его синхронным и не может. Если вам интересно, как это сделать с помощью простой JS, используйте XHR или fetch (я ожидаю, но не знаю, что jQuery использует XHR под капотом).

Пример выборки (из https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)

var form = new FormData(document.getElementById('login-form')); fetch("/login", { method: "POST", body: form });

Это всего лишь половина вашей головоломки.

Fetch вернет обещание, которое может быть использовано для выполнения чего-то еще, когда обещание разрешает/отклоняет. Обещание будет разрешено, когда ваш запрос на выбор завершен, он отклонит, если запрос завершится с ошибкой. Он работает так, что поток JS не блокируется и может выполнять другие операции, ожидая ввода-вывода.

Например, вы можете сделать что-то вроде:

loadingImageEl.style.display = 'block' fetch('/route', { method: 'POST', body: form }).then(() => { loadingImageEl.style.display = 'none' })

Это просто показывает и скрывает загружаемое изображение, вы можете создать и уничтожить его.

Существует много многих библиотек, которые также можно использовать вместо "родной" выборки, такой как axios, которая имеет очень похожие api, используя обещания.

Если вам действительно нравится структура синхронных вызовов, вы можете исследовать использование генераторов и выход, хотя использование async-await более естественно подходит. Это будет выглядеть примерно так:

async function loadReport (reportName) { const spinner = createLoadingSpinner() await fetchReport (reportName) destroyLoadingSpinner(spinner) }

Обратите внимание, что поддержка async-ожидания в настоящее время отрывочна, но решения, связанные с транспиляцией (например, babel), делают этот вариант жизнеспособным.