0

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

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

  2. Post提交一个表格：

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

    湾。以浏览器下载文档的方式将文档返回给浏览器。

一个问题。提交不是 ajax，这post意味着浏览器将其视为单击链接、刷新页面或关闭窗口的方式，例如它取消 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.
    });

使用 ajax执行 ( 2post )也不起作用。它可以完成 ( 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 请求呢？

4

1 回答 1

2

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

于 2012-10-10T22:02:30.270 回答