Submit()函数干扰提交事件

submit() function interfering with submit event

本文关键字：提交 事件 干扰 函数 Submit      更新时间：2023-09-26

我试图在浏览器通过POST请求下载文件时显示文件链接旁边的下载gif。目前，单击文件链接没有任何作用。如果我将.submit(function(){...});更改为.submit();，那么它会下载文件，但不会显示加载的gif。如果我将加载gif设置为.show();之前的.submit();，那么它不会显示，直到文件已经下载。

这是我当前的结构和JS…

<a class="file" data-location="directory/file">File.xlsx</a>
<span class="download_loader"></span>

JS 

$(document).on('click', 'a.file', function () {
    var location = $(this).data("location");
    var name = $(this).html();
    var loader = $(this).nextAll("span.download_loader");
    $('<form action="FileManager/download.php" method="POST" id="temp_download_form"><input type="hidden" name="name" value="'+name+'" /><input type="hidden" name="location" value="'+location+'" /></form>').appendTo('body').submit(function(loader) {
        loader.show();
        return true;
    });
    $("#temp_download_form").remove();
});

—解决方案—

根据下面的答案和评论，我终于能够得到一些正在工作的东西。我使用了https://github.com/filamentgroup/jQuery-File-Download的下载函数和一些超时函数来管理流。最终的用户体验很好，可以很好地显示和隐藏下载的gif。详见:http://d.pr/i/KfRP

最终JS代码

// Download Function
function download(url, data, method){
    //url and data options required
    if( url && data ){ 
        //data can be string of parameters or array/object
        data = typeof data == 'string' ? data : $.param(data);
        //split params into form inputs
        var inputs = '';
        $.each(data.split('&'), function(){ 
            var pair = this.split('=');
            inputs+='<input type="hidden" name="'+ pair[0] +'" value="'+ pair[1] +'" />'; 
        });
        //send request
        $('<form action="'+ url +'" method="'+ (method||'post') +'">'+inputs+'</form>')
        .appendTo('body').submit().remove();
    };
};
// Download File
$(document).on('click', 'a.file', function () {
    var location = $(this).data("location");
    var name = $(this).html();
    var cell = $(this).closest('td');
    $('<span class="download_loader"></span>').appendTo(cell);
    setTimeout(function(){
        download('FileManager/download.php','name='+name+'&location='+location,'post');
    }, 1000);
    setTimeout(function(){
        $("span.download_loader").fadeOut();
    }, 2000);
});

我会这样做:

var form = $("<form/>", {
    action : "FileManager/download.php",
    method : "POST",
    id : "temp_download_form"
});
//add inputs the same way and append to form... form.append(input1)... form.append(input2)
form.on('submit', function () {
    loader.show();
});

但是…问题是这是一个异步操作，所以不容易判断操作何时完成。

这是一篇关于检查表单何时完成的文章

如何在表单提交后做一个Jquery回调?

但是…我会用$。使用Ajax提交表单，并使用success方法触发删除加载图标。

下面是关于使用jQuery的$ajax

的文档https://api.jquery.com/jQuery.ajax/

相关文章：