javascript - 如果文件下载错误，则在提交表单上管理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

主要问题是，除非将文档重定向到某个位置(使用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);
    }
});

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