防止形式從後取消阿賈克斯行動提交下載

Question

我有一個按鈕[下載文件]它做這兩件事情：

1. 一個Ajax調用並填充數據表。

2. Post提交一份表格：

   a。運行創建文檔的後端腳本

   b。以瀏覽器下載文檔的方式將文檔返回給瀏覽器。

一個問題。 post提交不是ajax，這意味着瀏覽器以與點擊鏈接，刷新頁面或關閉窗口相同的方式對待它，例如。它取消了ajax請求，甚至沒有得到響應錯誤。

在按鈕上使用.preventDefault()不起作用。它確實允許ajax調用（）成功完成，但不提交表單，所以（）表單從不提交。

<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. 
    }); 

做（）與阿賈克斯post也不起作用。它可以完成（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）。