表单提交取消 jQuery ajax 调用

Question

我有一个通用处理程序 (DownloadHandler.cs)，它既可以生成 pdf，也可以下载 pdf。生成时我使用 jQuery ajax 调用，下载时我使用提交的表单元素。问题是表单元素取消了生成请求，因此永远不会调用“成功”事件（见下图）。

生成代码（从按钮调用）：

$.ajax({
    type: "POST",
    url: "/DownloadHandler.ashx",
    data: {
        GeneratePdf: true
    },
    success: function (result) {
        console.log(result);
    },
    error: function (errorMessage) {
        console.log(errorMessage);
    }
});

下载代码（从按钮调用）：

var data = { "GeneratePdf": false }

var inputs = '';

$.each(data, function (key, value) {
    inputs += '<input type="hidden" name="' + key + '" value="' + value + '" />';
});

$('<form action="/DownloadHandler.ashx" method="POST">' + inputs + '</form>').appendTo('body').submit().remove();

下载处理程序：

public void ProcessRequest(HttpContext context)
{
    if (!String.IsNullOrEmpty(context.Request["GeneratePdf"]) && Convert.ToBoolean(context.Request["GeneratePdf"]))
    {
        Thread.Sleep(3000);
        context.Response.Clear();
        context.Response.Write("GENERATING");
        context.Response.Flush();
    }
    else
    {
        Thread.Sleep(3000);

        FileInfo pdfFile = new FileInfo(@"C:\1.pdf");

        context.Response.Clear();
        context.Response.AddHeader("Content-Disposition", "attachment; filename=" + pdfFile.Name);
        context.Response.AddHeader("Content-Length", pdfFile.Length.ToString());
        context.Response.ContentType = "application/octet-stream";
        context.Response.WriteFile(pdfFile.FullName);
        context.Response.Flush();
    }
}

public bool IsReusable
{
    get
    {
        return false;
    }
}

我刚刚添加了一个 Thread.Sleep 来演示 pdf 的生成。我错过了什么还是应该使用其他方法？

Answer 1

也许您可以尝试使用表单在您的页面上定位一个微小的动态iframe。类似的东西：

var data = { "GeneratePdf": false }

var inputs = '';

$.each(data, function (key, value) {
    inputs += '<input type="hidden" name="' + key + '" value="' + value + '" />';
});

var f = $('<form action="/DownloadHandler.ashx" method="POST">' + inputs + '</form>');


var iframe = $('<iframe src="about:blank"/>')  // should be made tiny/transparent with some css
              .appendTo('body');

iframe.contents().find('html').append(f);
f.submit().remove();