Jquery 1.11.1 - 下载文件和附加回调答案

【问题标题】：Jquery 1.11.1 - download file and additional callbackJquery 1.11.1 - 下载文件和附加回调
【发布时间】：2025-12-26 03:45:16
【问题描述】：

我有表单，我通过调用提交给 django 服务器。

$("#my_form").submit();

服务器通过执行此代码返回xml文件：

content = some_data_retrieved_from_database_as_xml()
response = HttpResponse(content, content_type='text/xml')
response['Content-Disposition'] = 'attachment; '
response['Content-Disposition'] += 'filename=my_file.xml'
response['Content-Encoding'] = 'UTF-8'
return response

谷歌浏览器只下载这个文件，但我想注册 additional 回调函数，称为 myFunction(data)。

Chrome 应该下载这个文件，然后调用 myFunction（这个 xml 文件）。
我试过这段代码，但它不起作用：

$("#my_form").bind('ajax:complete', myFunction);

我也尝试使用 $.post，但之后只调用了回调函数，不幸的是我的文件没有下载。

【问题讨论】：

也许你可以使用这样的东西：johnculviner.com/…
不容易做，见*.com/questions/12020168/…
确实没有简单的方法可以做到这一点。我认为最好的解决方案可能是在服务器端实现一些东西，就像你从服务器获取下载进度一样，但是你会轮询服务器，直到它告诉你文件已完全下载，并且然后执行回调等。

标签： javascript jquery django file download

【解决方案1】：

所以你想异步post，下载返回的文件，同时执行一个回调。一种可能性是“伪造”下载链接：

$.post(POST_URL, POST_DATA, function(response) {
  var a = document.createElement('a');
  a.setAttribute('href', 'data:'
    + response.contentType
    + ';charset='
    + response.inputEncoding
    + ','
    + new XMLSerializer().serializeToString(response));
  a.setAttribute('download', DOWNLOAD_FILENAME);
  a.click();
  // file download triggered

  myFunction();
  // additional callback action
});

更新

正如Zoran Majstorovic在他的评论中提到的，你可以试试这个jQuery插件：http://johnculviner.com/jquery-file-download-plugin-for-ajax-like-feature-rich-file-downloads/

只需包含the source，然后

$.fileDownload(POST_URL, {
  httpMethod: "POST",
  successCallback: myFunction
});

为了安全，你需要一个事先设置好的cookie

Set-Cookie: fileDownload=true; path=/

【讨论】：

对不起，由于我的应用程序浏览器兼容性，我无法使用下载标签
@user3854236 使用跨浏览器兼容的解决方案查看更新的答案（虽然我自己还没有在 IE 上测试过）
你能告诉我如何放置cookie吗？谢谢

【解决方案2】：

$(form).submit() 不是 ajax，而是表单发送（通常是 POST），因此，您不能为“提交响应完成”AFAIK 注册任何事件侦听器。我正在使用jquery-file-download-plugin，根据您的需要，基于 cookie 执行一些 javascript。

【讨论】：

【解决方案3】：

我相信答案，至少根据这个类似的线程：

How to do a Jquery Callback after form submit?

将是：

$("#myform").bind('ajax:complete', function() {
  // tasks to do 
});

See jQuery documentation for ajaxComplete

【讨论】：

【解决方案4】：

简单的方法是提交结果将是一个带有iframe 的html 页面。 iframe 将执行下载，父 html 将执行您喜欢的任何内容。

【讨论】：