无法使用AJAX时（如文件下载），如何为表单提交添加回调？

因为直接提交表单触发文件下载时，浏览器不会像AJAX那样提供原生的完成回调，下面是两种可行的实现方案：

方案1：使用隐藏iframe承载表单提交 #

通过将表单挂载到隐藏的iframe中提交，监听iframe的load事件来判断请求完成，这个事件会在文件下载请求结束后触发（无论服务器返回成功的文件还是错误页面）。

代码示例 #

// 创建隐藏iframe
const $iframe = $('<iframe>', {
  id: 'download-iframe',
  style: 'display:none;'
}).appendTo('body');

// 获取要提交的表单
const $form = $('#your-form-id');

// 设置表单的target为iframe的id，让提交结果在iframe中打开
$form.attr('target', 'download-iframe');

// 监听iframe的load事件
$iframe.on('load', function() {
  // 这里写请求完成后的回调逻辑
  console.log('文件下载请求已完成');
  
  // 可选：清理iframe
  setTimeout(() => {
    $iframe.remove();
  }, 100);
});

// 提交表单
$form.submit();

注意事项 #

• 这种方法无法直接区分下载成功还是失败（比如服务器返回404错误页，iframe也会触发load事件）。
• 对于文件下载响应，浏览器会在接收到响应头后就触发iframe的load事件，不会等待文件完全下载，因此该事件可视为请求“完成”的标志。

方案2：后端配合+前端轮询Cookie #

如果需要准确区分下载成功/失败，可以让后端在处理完下载请求后设置一个带状态的Cookie，前端定时轮询这个Cookie，检测到后执行回调并清除Cookie。

步骤说明 #

1. 后端处理：在下载接口中，当文件准备完成（或出现错误）时，设置Cookie，比如download_status=success或download_status=failure。
2. 前端实现：提交表单后启动定时器轮询Cookie，检测到指定Cookie后执行回调，随后清除Cookie并停止定时器。

代码示例 #

// 清除旧的状态Cookie
document.cookie = "download_status=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

// 提交表单
$('#your-form-id').submit();

// 轮询Cookie的函数
function checkDownloadStatus() {
  const status = document.cookie.split('; ').find(row => row.startsWith('download_status='))?.split('=')[1];
  
  if (status) {
    // 停止轮询
    clearInterval(pollTimer);
    // 执行回调
    if (status === 'success') {
      console.log('文件下载成功');
    } else {
      console.log('文件下载失败');
    }
    // 清除Cookie
    document.cookie = "download_status=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
  }
}

// 启动轮询，每隔500ms检查一次
const pollTimer = setInterval(checkDownloadStatus, 500);

注意事项 #

• 需要后端配合设置Cookie，且要注意Cookie的path和domain配置，确保前端能读取到。
• 轮询间隔可根据实际场景调整，避免过于频繁的检查影响性能。

内容的提问来源于stack exchange，提问作者RobH