Firefox中Ajax下载进度异常，错误弹窗问题求助

核心问题分析 #

你的代码在Firefox中触发错误弹窗，主要源于三个问题：

• 未阻止表单默认提交行为，页面刷新会直接中断AJAX请求
• GET请求错误使用了仅适用于文件上传场景的contentType: false和processData: false配置
• AJAX无法直接处理下载类响应，Firefox对这类响应的错误判定比Chrome更严格

修复步骤 #

1. 启用表单默认行为阻止

取消注释e.preventDefault();，避免表单自动提交刷新页面，中断AJAX请求：

$('#form-download').submit(function(e) {
    e.preventDefault(); // 必须启用这行代码
    // 其余逻辑保持不变
});

2. 修正AJAX配置

GET请求不需要contentType和processData的特殊配置，直接删除这两行：

$.ajax({
  type: 'GET',
  url: 'backup_log.php',
  data: {
    submit: submit
  },
  cache: true,
  // 移除 contentType: false 和 processData: false
  beforeSend: function(e){
    loader.style.display = "block"
  },
  // 其余逻辑保持不变
});

3. 调整下载处理逻辑

AJAX无法直接处理带下载头的响应（比如backup_log.php输出Content-Disposition: attachment的情况），建议在AJAX成功后创建下载链接触发下载：

success: function(response){
  // 创建下载链接触发文件下载
  const downloadLink = document.createElement('a');
  downloadLink.href = 'backup_log.php?submit=submit';
  downloadLink.download = 'backup.log'; // 替换为你的目标文件名
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);

  // 更新加载状态为成功
  $(".loader").html('<div class="icon icon--order-success svg"><svg xmlns="http://www.w3.org/2000/svg" width="72px" height="72px"><g fill="none" stroke="#8EC343" stroke-width="2"><circle cx="36" cy="36" r="35" style="stroke-dasharray:240px, 240px; stroke-dashoffset: 480px;"></circle>   <path d="M17.417,37.778l9.93,9.909l25.444-25.393" style="stroke-dasharray:50px, 50px; stroke-dashoffset: 0px;"></path></g></svg></div>');
  $("#btn").hide();
},

4. 优化错误提示逻辑

避免无差别弹出错误，仅在真正的请求异常（如连接失败、超时）时提示：

error: function(err){
  // 排除下载响应导致的误判，仅在请求状态异常时提示
  if(err.status !== 200 || err.statusText !== "OK"){
    alert("下载请求失败，请重试");
  }
}

额外HTML结构修正 #

你的HTML中表单标签闭合位置错误，修正后确保表单包裹提交按钮：

<form id="form-download" method="POST">
    <center>
        <div class="btn"> </div>
        <button class="button" name="submit" id="btn" role="button">Download</button>
        <div class="loader" id="loader">
            <center>
                <img src='../img/Rolling.gif' class='loaderGif' style='margin-top: 10px' width='30' height='30' />
            </center>
        </div>
    </center>
</form> <!-- 修正表单闭合位置 -->
<div class="checkmate"></div>
<center>
    <?php echo $msg; ?>
</center>

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