防止表单提交后下载取消Ajax操作

Question

我有一个按钮[下载文档]，它可以做以下两件事：

1. 进行ajax调用并用数据填充表

2. Post提交的表格：

   a。运行创建文档的后端脚本

   b。以浏览器下载文档的方式将文档返回到浏览器。

一个问题。post提交不是ajax，这意味着浏览器对待它的方式与单击链接、刷新页面或关闭窗口相同，例如，它取消了ajax请求，甚至没有得到响应错误。

在按钮上使用.preventDefault()不起作用。它确实允许ajax调用(1)成功完成，但随后表单没有提交，因此(2。

<form action="/backendScript" method="post">
<input type="submit" value="Download Document">
</form>
$(".downloadBtn").on("click", function (e) {
generateTable();
e.preventDefault(); // without this, the ajax in generateTable(); is cancelled, but with it, the form isn't submitted.
});

使用ajaxpost执行(2)也不起作用。它可以完成(2.a)，但返回的文档直接进入Javascript，而不是浏览器，并且Javascript无法导致下载事件，因此(2.b。

$.post("/backendScript", formData, function (generatedDoc) {
console.log(generatedDoc); //yay, here's our doc! but how do we download it??
});

因此，看起来我必须post提交表单。但我如何防止这取消任何正在进行的ajax请求？

Answer 1

在generateTable中的ajax调用成功/错误/任何响应事件中，提交表单。document.forms["myform"].submit();或$('#myform').submit();(取决于您想使用vanilla-js还是jQuery)。