javascript - 如何在没有JQUERY的情况下使表单提交同步

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'));
提取(“/登录”，{
方法:“POST”，
body :形式
});


不过，这只是您的一半难题。

Fetch 将返回一个 promise，当 promise 解决/拒绝时，它可以用来做其他事情。当您的获取请求完成时， promise 将解决，如果请求失败，它将拒绝。它是这样工作的，这样 JS 线程就不会被阻塞，并且可以在等待 I/O 的同时执行其他操作。

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


loadingImageEl.style.display = ' block '
获取('/路线'，{
方法:'POST'，
body :形式
})
.then(() => {
loadingImageEl.style.display = '无'
})


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

有很多库也可以用来代替“本地”获取，例如 axios ，它有一个非常相似的 api，使用 promises。

如果您真的喜欢同步调用的结构，那么您可以研究使用生成器和 yield，尽管使用 async-await 是更自然的选择。它最终看起来像这样:


异步函数 loadReport (reportName) {
const 微调器 = createLoadingSpinner()
等待获取报告(报告名称)
destroyLoadingSpinner(微调器)
}


请注意，目前对 async-await 的支持还很粗略，但涉及转译的解决方案(例如 babel)使它成为一个可行的选择。