需求背景
遇到個需求，需要根據使用者輸入的id清單下載下傳檔案。一般情況下，下載下傳檔案用GET請求就能滿足需求，但是，這個需求的請求參數中可能有上千個id，GET請求很可能超出浏覽器參數長度限制。那麼該怎麼解決這個問題呢？
解決方案
請求方式基本可以确定隻能用POST了，而直接用Ajax發POST請求是不行的。經過一番調研，總結兩種方案：
- 可以背景接到請求後生成下載下傳檔案，放到靜态檔案目錄，然後傳回檔案路徑，前端拿到路徑後用GET請求拉取檔案。此方案可行，但是我們的靜态檔案都在亞馬遜伺服器上，還要把檔案上傳到亞馬遜伺服器，然後前端去亞馬遜伺服器拉取檔案，總感覺繞個彎怪怪的。是以有了下邊的方案2；
- 用戶端使用POST表單送出請求，不要用Ajax。示例代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>下載下傳檔案示例程式</title> </head> <body> <button onclick="downloadExcel()">下載下傳</button> <script type="text/javascript"> function downloadExcel(){ download("http://localhost:8080/download", {"ids": "10000,10002"}); } /** * post方式下載下傳檔案 * @param {[string]} url 接口 * @param {[json]} data 資料 * @return */ function download(url, data){ var body = document.getElementsByTagName('body')[0]; var form = document.createElement('form'); form.method = 'POST'; form.action = url; for(key in data){ var param = document.createElement('input'); param.type = "hidden"; param.name = key; param.value = data[key]; form.appendChild(param); } body.appendChild(form); form.submit(); body.removeChild(form); } </script> </body> </html>
親測相容老IE，而且頁面無重新整理，問題解決。
備注
本人主背景，非專業前端，前端代碼寫的不好，僅供參考。
![用 Canvas 編織璀璨星空圖[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)