Question

我有一个动态表单，在提交时需要同步，我已经知道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，使用我当前的代码，即使后端处理时间超过1分钟，GIF也会在不到一秒的时间内出现并消失如果有人有另一种解决方案，我会赞成！

Answer 1

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线程不会被阻塞，并且可以在等待I / O时执行其他操作。

例如，您可以执行以下操作：

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

这只是显示和隐藏加载图像，您可能想要创建并销毁它。

那里有很多图书馆也可以用来代替本地图书馆。 fetch，例如axios，它使用promises具有非常相似的api。

如果你真的喜欢同步调用的结构，那么你可以调查使用生成器和yield，尽管使用async-await更自然。它最终会看起来像：

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

请注意，对async-await的支持目前很粗略，但涉及转换的解决方案（如babel）使这成为一个可行的选择。

如何使表单提交同步WITHOUT JQUERY

1 个答案: