Question

用户填写电子邮件验证表（通过AJAX提交）后，如果AJAX呼叫响应成功，我想强制下载在当前浏览器窗口中启动。

电子邮件验证表格如下：

<form id="form_download_email" method="POST" action="music_email_verification.php">
    <input id="download_email" type="text" tabindex="1" /> <br/>
    <a href="javascript:void(0);" id="download_email_button">
        Download!
    </a>
</form>

点击“download_email_button”后的js / jquery如下所示：

$("#download_email_button").click(function() {

    var action = $("#form_download_email").attr('action');
    var form_data = {email: $("#download_email").val()};

    $.ajax({
        type: "POST",
        url: action,
        data: form_data,
        success: function(response){
            if(response == 'success'){    
                window.location.assign('URL to .mp3 or ZIP');
            }
        }
    });
});

响应=='成功'块被输入，现在我发现强制下载文件但没有启动弹出窗口的唯一解决方案（通过window.open - 无论如何被Chrome阻止），是使用window.location.assign如上所示。这是通过JS强制下载文件的正确方法吗？

然而，使用window.location.assign方法我只能下载1个文件，如果我尝试用两个mp3放入两行，它就不起作用了。 AKA：

window.location.assign('http://song1.mp3');
window.location.assign('http://song2.mp3');

我不希望用户在提交表单后必须单击另一个链接才能下载.mp3 / .zip，我想尝试在JS / jQuery中完成所有操作。

我想到的最后一个方法是响应=='成功'让浏览器点击文档上的两个隐藏标签，这些标签的href指向mp3。但是，似乎“问题是你无法通过点击”触发链接的默认操作“jquery，只有onclick属性。

我应该用js这样做吗？如果没有办法做到这一点，我应该尝试像PHP这样的东西吗？

关于我当前这样做的任何建议或者如何下载多个mp3文件的建议都会有所帮助！

Answer 1

为每个要下载的网址创建一个iframe，并将iframe的来源设置为文件网址：）

var 
    urls = ['url_1.mp3', 'url_2.mp3', /* ... , */ 'url_N.mp3'],

    doLoad = function(url){
        $("<iframe />")
            .css("display", "none")
            .bind("load", function(e){
                this.src == url && $(this).remove();
            })
            .attr("src", url)
            .appendTo($(document.body));
    };

for( var i=0; i < urls.length; i++ ) {
    doLoad( urls[i] );
}

在Ajax上成功下载.mp3或.zip文件

1 个答案: