ajax 下載

原本ajax是不能下載檔案的，原因：因為response，一般請求瀏覽器是會處理伺服器輸出的response，例如生成png、檔案下載等,然而ajax請求只是個“字元型”的請求，即請求的內容是以文字型別存放的。檔案的下載是以二進位制形式進行的，雖然可以讀取到返回的response，但只是讀取而已，是無法執行的，說白點就是js無法呼叫到瀏覽器的下載處理機制和程式。

要想下載檔案，可以直接使用標籤

<a href="/media">點選下載Excel</a>
or
location.href = '/media';

這次點選下載就出現如下理想效果。

但是還有一種情況就是可以利用ajax請求下載：

$.ajax({
    type: "POST",
    url: url,
    data: params,
    success: function(response, status, request) {
        var disp = request.getResponseHeader('Content-Disposition');
        if (disp && disp.search('attachment') != -1) {  //判斷是否為檔案
            var form = $('<form method="POST" action="'
 
 + url + '">');
            $.each(params, function(k, v) {
                form.append($('<input type="hidden" name="' + k +
                        '" value="' + v + '">'));
            });
            $('body').append(form);
            form.submit(); //自動提交
        }
    }
});

上面的方法是個技巧，

AJAX傳送引數到後臺後，後臺處理後，傳資料到前臺，Ajax在success裡面構建了一個from表單, 當後臺傳來的是檔案時，自動點選提交按鈕，檔案就會被下載。

ajax檔案上傳

上面是檔案下載，下面說一下檔案上傳，這個網上就很多例子了

前臺form表單的提交方式有很多種，例如：

1. form表單submit直接提交的方法
2. Ajax提交的方法
3. jquery提交的方法
4. 原生js提交的方法

這裡總結一下ajax提交的兩種方式：

1.serialize() 方法：

通過序列化表單值，建立 URL 編碼文字字串。我們可以選擇一個或多個表單元素（比如 input 及/或 文字框），或者 form 元素本身。序列化的值可在生成 AJAX 請求時用於 URL 查詢字串中。
所用到的語法為：

$("form").serialize()

這裡的$(“form”)操作物件是代表表單元素集合的 jQuery 物件，而不是js物件。

提交方法的程式碼段：

$('form').submit(function() {
  alert($(this).serialize());
  return false;
});

最終序列化後，表單中資料會一下面這種方式提交到後臺：a=1&b=2&c=3&d=4&e=5
這種方式處理表單時所適用的input標籤型別是有限的，只適用於一些常用的型別例如text、checkbox、select、date等等，但是對於file檔案型別的input框並不適用，那我們在用到ajax提交方式的時候應該如何提交file型別的input框資料呢?

2.封裝FormData 物件，直接用$.ajax提交

論壇上有人提及到FormData的封裝方式，將form表單中的內容封裝成formdata的資料格式
FormData 物件可以把form中所有表單元素的name與value組成一個queryString，提交到後臺，在使用Ajax提交時，使用FormData物件可以減少拼接queryString的工作量。

FormData的使用方法也是非常簡單，直接傳入form表單物件即可，如下：

var form = $('#form1');  
var formdata = new FormData(form);  

使用這種方式將資料封裝後，file型別的檔案資料即可以鍵值對的方式封裝在formdata中，然後用ajx提交，方法如下：

 $.ajax({  
        type : "POST",  
        url : "houtai/123.do",  
        data : formData,
        async: false,  
        cache: false,  
        contentType: false,  
        processData: false,
        success : function(msg) {  
            if(msg){
            alert('提交成功！');
            } 
        }  
});  

有一點需要注意的是，以formdata的方式提交時需要新增async: false, 同步，否則後臺無法接收到前臺傳過來的file檔案資料，這樣的提交方式，既可以提交任何一種type型別標籤，又可以在提交之後得到返回結果，方便快捷又實用。

使用ajaxForm上傳檔案

另外還可以使用 ajaxForm上傳檔案，他們是jQuery form外掛。

jQuery Form外掛是一個優秀的Ajax表單外掛，可以非常容易地、無侵入地升級HTML表單以支援Ajax。
jQuery Form有兩個核心方法 – ajaxForm() 和 ajaxSubmit()， 它們集合了從控制表單元素到決定如何管理提交程序的功能。

具體使用可以參考：http://malsup.com/jquery/form/

中文可以參考 ： https://blog.csdn.net/qq_38602656/article/details/78668924