javascript - 在 Javascript 中，如何在窗口位置重定向 Ajax 响应

Question

我目前有以下工作代码( Angular 但适用于任何 JS 框架):

var url = '/endpoint/to/my/file';

$http({
  method: 'GET',
  url: url
})
.success(function(jdata) {
  window.location = url;
})
.error(function(je){
  // display errors on page
});

上面是在完成一个表单并且用户点击了“提交”之后调用的(实际情况比这复杂一点，但思路是一样的)。我异步进行表单检查，因此不会重新加载页面。

如果请求成功，返回一个二进制文件(一个pdf文件)，如果不成功，请求返回一个400 BadRequest，带有JS格式的错误。所以我所做的是，如果成功，我将重定向到相同的 url 以获取 PDF，否则我将获得 JSON 错误对象并对其进行处理。

如果请求成功，如何避免发出两次请求？

• 注意 1:在后端，我只想保留一个执行所有操作的路由，检查 + 返回 PDF
• 注意 2:在我看来，目前的情况非常好，因为我有一个异步表单检查，如果成功，文件会直接在浏览器中下载，因为我有 "CONTENT-DISPOSITION"-> "attachment"在成功响应的HTTP header 中

更新:根据 Emile 的要求，有关架构的更多信息:在我的用例中，我有一个检查输入(和其他外部要求)的端点。出于安全原因，如果不满足所有要求，我将无法输出 PDF，因此我必须在交付文件(文件是自动生成的)之前进行检查。因此，拥有两个端点只会是多余的，并且会增加一些不必要的复杂性。

在写作时，我认为另一种解决方案可能是在进行检查时在端点上传递一个参数，这样如果成功，它就会停止并且不会生成 PDF，然后重定向到没有标志的相同端点输出PDF。所以我做了两次检查，但只加载(和生成——这是资源密集型的)文件一次，而且我只有一个端点……

这是修改后的代码:

var url = '/endpoint/to/my/file';

$http({
  method: 'GET',
  url: url+'?check'
})
.success(function(jdata) {
  window.location = url;
})
.error(function(je){
  // display errors on page
});

在后端(我使用 Play 框架/Scala)

def myendpoint(onlyDoCheck: Boolean = false) = Action{implicit request =>
   myForm.bindFromRequest.fold(
     e => BadRequest(myErrors),
     v => if(onlyDoCheck) Ok(simpleOkResponse) else  Ok(doComputationgeneratefileandoutputfile)
   )
}

Answer 1

真正的交易

您能做的最好的事情就是拆分端点。

1. 一个是为了表单和在没有刷新的情况下出现错误的便利。
2. 然后，成功后，重定向到仅下载文件的其他端点。

如果文件在磁盘上并且不是自动生成的并且需要通过身份验证才能下载，您可以将文件隐藏在普通端点后面，进行检查，然后使用 X- 返回文件使用 nginx 的 Accel-Redirect header 或使用 apache 的 X-Sendfile。

黑客攻击

免责声明:这与其说是最佳解决方案，不如说是黑客攻击。正如@Iceman提到的、Safari、IE、Safari-iOS、Opera-mini 和一些此类浏览器不支持此特定规范。

在您的服务器端点，如果文件可用且没有错误，您可以将 header 设置为文件的内容类型(如 'application/pdf')，以便下载自动启动。

如果有错误，不设置header，返回一个错误的json，通过javascript通知用户。

因为我们不知道后面是什么，这里有一个python(Django)的例子:

response = HttpResponse(content_type='application/pdf')
response['Content-Disposition'] = 'attachment; filename=your_filename.pdf'
response.write(repport.printReport(participantId))
return response

您可以在 ajax 成功回调中处理响应:

$.ajax({
    url: 'endpoint.php',
    success: function(data) {
        var blob = new Blob([data]);
        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = "filename.pdf";
        link.click();
    }
});

您也可以试试 jQuery fileDownload本answer中提到的插件.