使用 Ajax 下载 JQuery 文件

当我的用户选择生成报告时，我使用 John Culviner 出色的 fileDownload 插件来生成“请稍候”消息。

当用户单击链接时，我向 PHP 发送一个 ajax 请求，该请求在服务器上生成 PDF。此时，我正在尝试更新 fileDownload 插件的成功处理程序中的链接。

我可能会错误地处理这个问题，但这是我的代码 - 非常感谢任何帮助。

$("body").on("click","##pdfLink", function(e){

    $.fileDownload($(this).attr('href'), {
        preparingMessageHtml: "Preparing your report, please wait...",
        failMessageHtml: "There was a problem generating your report, please try again."
    });

    // Build our data string.
    var strData = {method: "createPDF"};

    // Send a request to build our XL file.
    $.ajax({
        url: '/pdf.php',
        data: strData,
        type: 'get',
        dataType: 'json',
        success: function(data) {
            alert(data);
            $("##pdfLink").attr("href","/pdf/"+data);
        },
        error: function(e) {
            console.log(e);
        }
    });
    return false; 
    e.preventDefault(); 
})

此时，当我单击链接时，模式将正确显示，并显示“请稍候”消息。我的文件确实在服务器上构建（通过我的成功处理程序中的警报确认），并且我的 HREF 确实得到更新。但是，该插件不会提示用户下载。

Thanks!

您不需要在 JS 中调用 ajax 函数。你的链接<a href='yoursite.com/pdf.php'用这个命令来识别$(this).attr('href')pdf 服务器进程的位置。

EDIT:

你的来电：

// Build our data string.
var strData = {method: "createPDF"};

var $preparingFileModal = $("#preparing-file-modal");
$preparingFileModal.dialog({ modal: true });

$.fileDownload($(this).attr('href'), {
    httpMethod: "GET",
    data: strData
    successCallback: function (responseHtml, url) {
        $preparingFileModal.dialog('close');
        // In this case 
        $.fileDownload("/pdf/"+responseHtml, {
            preparingMessageHtml: "Download file",
            failMessageHtml: "Not work"
        });

    },
    failCallback: function (responseHtml, url) {
        $preparingFileModal.dialog('close');
        $("#error-modal").dialog({ modal: true });
    }
});

HTML:

<div id="preparing-file-modal" title="Preparing report..." style="display: none;">
    We are preparing your report, please wait...

    <div class="ui-progressbar-value ui-corner-left ui-corner-right" style="width: 100%; height:22px; margin-top: 20px;"></div>
</div>

<div id="error-modal" title="Error" style="display: none;">
    There was a problem generating your report, please try again.
</div>