在下载文件出错的情况下管理表单提交时的 JSON 服务器响应

Question

我有一个简单的 jQuery 代码，当用户单击按钮时，它会要求 PHP 服务器下载文件：

// Build a temp form
var jRestr = {sFitxer: sFitxer, bDownload: true};
var $form = $('<form></form>').attr('action', getMBD_URL()).attr('method', 'post');
// Add the one key/value
$form.append($("<input></input>").attr('type', 'hidden').attr('name', 'Consulta').attr('value', 'downLoadFile.php'));
$form.append($("<input></input>").attr('type', 'hidden').attr('name', 'UserName').attr('value', sessionStorage.usuari));
$form.append($("<input></input>").attr('type', 'hidden').attr('name', 'Token').attr('value', sessionStorage.token));
$form.append($("<input></input>").attr('type', 'hidden').attr('name', 'sFormat').attr('value', 'META'));
$form.append($("<input></input>").attr('type', 'hidden').attr('name', 'Modul').attr('value', sModul_glb));
$form.append($("<input></input>").attr('type', 'hidden').attr('name', 'sjRestr').attr('value', JSON.stringify(jRestr)));
//send request
$form.appendTo('body').submit().remove();

这就像一个魅力，但如果服务器遇到一些问题（找不到文件、权限被拒绝等），它会返回一个带有错误信息的 JSON，而不是请求的文件。

如何捕捉并以用户可读的格式显示？

我对可以使用哪种技术感到困惑，因为如果我使用 AJAX 调用，我不知道如何下载文件，如果我使用 HTML 提交调用，我将失去响应控制。

Answer 1

Ajax 不适用于下载文件。您可以改为获取文件名作为响应，然后重定向它

你的ajax成功函数应该是这样的。

document.location = "download.php?filename=" + response.fileName;

剩下的工作将由这两个标头的php响应完成。

下载.php

<?php 

$filename = $_GET['filename'];

header('Content-Type: application/force-download');
header('Content-Disposition: attachment; filename=' . $filename);

Answer 2

主要问题是你不能用 ajax 下载文件，除非你把文件重定向到某个地方（用 JS window.location 或 提交的表单）。

“正确”的方式

在您的服务器中创建一个端点以检查文件是否存在（或具有许可等）以便通过 ajax 轻松访问，一旦此请求执行成功响应，然后重定向（提交创建的表单）以获取文件.

var url = "new_endpoint_to_check_if_file_exists";

$.ajax({
    url: url,
    type: 'GET',
    success: function() {
        // Here the code to append your form and submit to download file.
    },
    error: function(er){
       console.log(er);
    }
});

另一方面，如果您想控制响应建议您使用 Ajax，请修改服务器上的逻辑工作方式。

丑陋的方式

如果您无法如前所述修改响应逻辑的工作方式，那么理论上您仍然可以下载文件，但您需要向同一个 URL 发出 2 次请求（提交表单的 2 次）。

// The form Data
var data = {
    'Consulta': 'downLoadFile.php',
    'UserName': sessionStorage.usuari,
    'Token': sessionStorage.token,
    'sFormat': 'META',
    'Modul': sModul_glb,
    'sjRestr' JSON.stringify(jRestr)
};
// The request URL 
var url = getMBD_URL();

$.ajax({
    url: ,
    type: 'POST',
    data: data
    success: function() {
        // If the "file exists or there's no server error"
        // Generate the file download again
        // Build the form and submit again ...
        var jRestr = {sFitxer: sFitxer, bDownload: true};
        var $form = $('<form></form>').attr('action', getMBD_URL()).attr('method', 'post');
        // Add the one key/value
        $form.append($("<input></input>").attr('type', 'hidden').attr('name', 'Consulta').attr('value', 'downLoadFile.php'));
        $form.append($("<input></input>").attr('type', 'hidden').attr('name', 'UserName').attr('value', sessionStorage.usuari));
        $form.append($("<input></input>").attr('type', 'hidden').attr('name', 'Token').attr('value', sessionStorage.token));
        $form.append($("<input></input>").attr('type', 'hidden').attr('name', 'sFormat').attr('value', 'META'));
        $form.append($("<input></input>").attr('type', 'hidden').attr('name', 'Modul').attr('value', sModul_glb));
        $form.append($("<input></input>").attr('type', 'hidden').attr('name', 'sjRestr').attr('value', JSON.stringify(jRestr)));
        //send request
        $form.appendTo('body').submit().remove();
    },
    error: function(er){
       console.log(er);
    }
});

这应该可以解决问题，但是，我会选择“正确”的方式。