如何使用 jquery 在模板中捕获 Django“GET”事件？

Question

在我的 Django 项目中，我有一个生成报告的 pdf 下载按钮。当我按下按钮时，我想要一个显示正在处理报告的模式。下载pdf后，我希望模态自动隐藏。

但是，我在最后一部分遇到了一些问题。我知道 Django 在下载报告时会在后端发送“GET”消息（“GET /download/140/...”）

如何在我的模板中“捕捉” ("GET /download/140/...") 事件？

代码：

<a href="{% url 'report-download' object.id %}" class="btn btn-grey" id="pdf-button"></a>

启动下载时显示“处理”模式...

<script type="text/javascript">
$("#pdf-button").on("click", function(){
    $('#myPDFModal').modal('show');
});
</script>

尝试：使用 Ajax 完成下载后关闭“处理”模式...

<script type="text/javascript">
$(document).on('click', '#pdf-button', function(event)
{
    event.preventDefault();
    $.ajax({
        url: '{% url 'report-download' object.id %}',
        type: 'GET',
    }).done(function(result) {
        $('#myPDFModal').modal('hide');
    });
});
</script>

上面的代码似乎可以在正确的“GET”事件中显示/隐藏模式，但是没有下载 pdf..

Answer 1

您可以将download 和target="_blank" 添加到您的pdf 链接中。

<a 
    href="{% url 'report-download' object.id %}" 
    class="btn btn-grey" 
    id="pdf-button"
    download="SuggestedFilename.pdf"
    target="_blank"
></a>

这将允许文件出现在下载中，而不会弄乱页面位置（这是我对您要完成的工作的理解）。

接下来，在 onclick 处理程序中删除 event.preventDefault() - 这将使链接再次工作。并且不再需要 .ajax 调用。所以剩下的就只有.modal('hide')：

<script type="text/javascript">
$(document).on('click', '#pdf-button', function(event) {
    $('#myPDFModal').modal('hide');
});
</script>

在那些 GET 消息上 - 那是你的服务器的日志。没有办法（出于安全性等原因）从前端访问它。如果您发起了请求，您只能等待来自服务器的回复（这就是您对 ajax 调用的 .done(...) 部分所做的事情）。

如果您坚持进行“类似 ajax”的下载，请参阅此答案：Download a file by jQuery.Ajax