如何在文件转换时使用ajax制作加载器[重复]答案

【问题标题】：How to make a loader using ajax while file is converting [duplicate]如何在文件转换时使用ajax制作加载器[重复]
【发布时间】：2019-07-22 21:46:31
【问题描述】：

我正在尝试在文件转换时制作加载器。

我正在使用 Nodejs 并且我正在转换一个文件，我正在使用 AJAX Get 请求调用我的 API，然后它在完成使用内容处置文件可供下载时开始转换文件，因此我想制作一个供用户等待的加载器。

但我面临一个问题，即在我的 Nodejs 请求发送 res 数据时如何检查 AJAX 成功调用

AJAX 代码

function download()
{
      var id ='{{@root.meta.id}}';
      $.ajax({

             url: "/getdownload",
             data: { id: id },
              type: "GET",
              dataType: "json",
              beforeSend: function () {
              $("#loading_img1").css('display', 'inline');
              },
              success: function (data) {
                alert("Success");               

                $("#loading_img1").css('display', 'none');
              },//success
              error: function (jqxhr, status, exception) {
                alert('Sorry Try Again.', exception);
              },//error
              always: function (xhr, status) {
                alert("The request is complete!");
              }//always
            });
 }

Nodejs 代码：

...
fs.readFile('/Users/apple/Desktop/'+output, function (err, content) {
          if (err) {
            res.writeHead(400, {
              'Content-type': 'text/html'
            })
            console.log(err);
            //res.redirect('/');
          } else {
            //specify Content will be an attachment
            res.setHeader('Content-disposition', 'attachment; filename=' + output);
            res.end(content);
          }
});

问题是它在数据中发送响应，我无法解决这个问题，我希望在服务文件加载器结束之前调用加载器并通过此方法下载文件。

编辑： 您可以假设当有人尝试转换文件时，它会显示等待时间/百分比转换，这就是我想要实现的。谢谢

【问题讨论】：

普遍的共识是，在 ajax 响应中返回文件不起作用，因为 javascript 可以显示另存为/下载对话框。快速查看 SO 答案分为两部分 - 保存文件服务器端然后重定向到该文件，或重定向到处理文件。既不使用 ajax 来下载文件。示例：stackoverflow.com/questions/27785819/…
我之前使用的是窗口位置，但我的老板告诉我这样做:(你可以假设当有人试图转换文件时，它会显示等待时间/百分比转换这就是我想要的实现。谢谢
如果您的老板告诉您如何实现无法实现的结果，那么他们需要指导您。您不能仅从 Javascript 保存到文件。它需要重定向或新标签来打开自动下载的内容。也可以创建一个下载链接并单击它，但不是在所有浏览器中，也不要期望它总是可行的。有充分的理由阻止从代码自动下载。
另外，不要试图显示剩余时间或完成百分比，因为这要复杂得多。我建议使用简单的微调器类型图形来显示进程正忙。
1) 显示正在进行的动画 2) 进行 ajax 调用 3) 在服务器上，构建文件，并保存到服务器 4) 返回文件是 "准备好”，带有指向（临时）文件的链接 5) location.href 指向新生成的文件。解决您的所有问题。

标签： jquery node.js ajax

【解决方案1】：

据我所知，尝试将您的加载程序代码从success 移动到completed。喜欢

...

...

                      beforeSend: function () {
                      $("#loading_img1").css('display', 'inline');
                      },
                      success: function (data) {
                        alert("Success");               
                        console.log(data) //logs data from server
                      },
                      error: function (jqxhr, status, exception) {
                        alert('Sorry Try Again.', exception);
                      },//error
                      always: function (xhr, status) {
                        alert("The request is complete!");
                      }//always
                    }),
                    completed: () => $("#loading_img1").css('display', 'none');

...

completed在success 之后运行

【讨论】：

Completed 在成功（或错误）后立即运行。它与服务器上是否完成了其他事情无关。
感谢提醒，但我指的不是服务器上的完成。
是的，抱歉，措辞不正确。这与OP的问题无关。他们正在尝试使用 Javascript 获取并保存内容，而 AJAX 调用无法做到这一点。
@Archer 这不是一个重复的问题。我正在尝试让加载程序让用户等待。请删除重复项。
@adamwood 好的 - 你不能做你所描述的。查看链接的问题以获得有效的解决方案。

【解决方案2】：

完成在成功或错误回调执行后执行。

也许您也应该检查第二个参数完整的报价。它是一个字符串，包含 ajaxCall 的成功类型。

这里更详细地描述了不同的回调 https://jquery.com/#options

由于您正在使用文件流，所以完成是最后将被调用的东西

【讨论】：