submit（）函數干擾提交事件

Question

我試圖在瀏覽器通過POST請求下載文件時顯示文件鏈接旁邊的下載gif。目前，點擊文件鏈接什麼也不做。如果我將.submit(function(){...});更改爲.submit();，那麼它會下載該文件，但不會顯示加載gif。如果我在.submit();之前將加載gif設置爲.show();，那麼在文件已經下載之後它纔會顯示。

這裏是我目前的結構和JS ......

HTML

<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); 
}); 

Answer 1

我會做這樣的事情，而不是：

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(); 
}); 

...但是...問題是，這是一個異步操作，所以操作完成後很難分辨出來。

下面是有關檢查時，一個形式完成

How to do a Jquery Callback after form submit?

的但是...我會用$就提交表單，並使用成功方法的文章引發的去除加載圖標。

下面是使用jQuery的$阿賈克斯

https://api.jquery.com/jQuery.ajax/