使用Ajax下载JQuery文件
当我的用户选择生成报告时，我正在使用John Culviner的文件下载插件来生成“请稍候”消息。
当用户单击链接时，我向我的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确实得到了更新。 但是，该插件不会提示用户下载。
谢谢！
你不需要在JS中调用ajax函数。 您的链接标识此命令$(this).attr('href')您的pdf服务器进程的位置。
编辑：
你的来电：
// 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：
可能需要在收到链接参考后开始下载：
$("body").on("click","##pdfLink", function(e){ // Build our data string. var strData = {method: "createPDF"}; var self = this; var $pdfGeneratingDialog = $('',{ title:"Generating PDF", text: "Please wait..." }).dialog({modal:true}); // Send a request to build our XL file. $.ajax({ url: '/pdf.php', data: strData, type: 'get', dataType: 'json', success: function(data) { $pdfGeneratingDialog.dialog('close'); alert(data); $(self).attr("href","/pdf/"+data); //starting download process $.fileDownload($(self).attr('href'), { preparingMessageHtml: "Preparing your report, please wait...", failMessageHtml: "There was a problem generating your report, please try again." }); }, error: function(e) { console.log(e); } }); return false; });
你试过调整超时吗？
$.ajax({ url: '/pdf.php', data: strData, type: 'get', dataType: 'json', timeout: 10000, success: function(data) { alert(data); $("##pdfLink").attr("href","/pdf/"+data); }, error: function(e) { console.log(e); } }); return false; e.preventDefault();
我也使用jquery.filedownload为我的应用程序，我希望我的解决方案可以帮助那些对我有类似要求的人; 我只是稍微改变了用法。 即：
-
我用它跟rails3一起使用
-
我想显示tweeter bootstrap模式而不是jquery的Dialog。
A.客户端（前端），下面是用户单击HTML页面上的文件项时支持下载文件的function：
function DownloadFile（id，file_url，file_name，strTime）{
$.fileDownload(file_url, { successCallback: function (url) { $("#ilulModaldow").find('#file_name').html(file_name); $("#ilulModaldow").find('#file_created_at').html(strTime); $("#ilulModaldow").modal(); //DATNT comment: $("#ilulModaldow") is a normal tweeter modal }, failCallback: function (html, url) { alert('Connection error! Please try again'); } });
}
B.服务器端（后端），我创建了一个动作发送文件，这个动作是上面javascript函数的参数“file_url”：
def下载
a=APostAttach.find(params[:id]) send_file a.file.path(:original), :type => a.file_content_type #DATNT comment: below is the way I set cookies for jquery.filedownload plugin requirement cookies[:fileDownload] = true cookies[:Path] = "/"
结束
C.基于项目（文件）点击事件组合后端和字体结尾：
$('#attach_<%= attach.id %>').click(function(){ DownloadFile("<%= attach.id %>","<%= download_courses_path(:id => attach.id) %>","<%=attach.file_file_name %>","Uploaded at <%= time_ago_in_words(attach.created_at).gsub('about','') + ' ago'%>"); });
我正在使用以下代码在同一窗口中下载文件（无需打开新选项卡）。 它工作，虽然它没有任何错误支持…
function downloadURL(url, callback) { var id = 'hiddenDownloader'; $('body').append(''); var $iframe = $('#' + id); $iframe.on('load', function () { $iframe.remove(); // no error support callback(); }); } downloadURL('http://example.com', function() { alert('Done'); });