如果文件下载错误，则在提交表单上管理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 Submit调用，则会失去响应控制。

Answer 1

Ajax不是用于下载文件。 相反，您可以仅获取响应中的文件名，然后将其重定向

您的ajax成功功能将如下所示。

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

其余的工作将由这两个标头通过php响应来完成。

download.php

<?php 

$filename = $_GET['filename'];

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

Answer 2

主要问题是， 除非将文档重定向到某处 （使用JS window.location或提交的表单 ）， 否则无法使用ajax下载文件 。

正确的方式

在您的服务器中创建一个端点，以检查文件是否存在（或具有许可等），可以使用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);
    }
});

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