本文知識點：
1.post請求與get請求不同，post請求必須在請求報文中聲明請求參數的格式
涉及點：
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.setRequestHeader('Content-Type','application/json')
手動拼接參數
JSON.stringify()
2.post請求中，用FormData（）方法發送數據多的參數，如表單類型參數、圖片和視頻等二進制文件，等等
一、post請求與get請求不同，post請求必須在請求報文中聲明請求參數的格式。
格式1：
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')。
即 xhr.send( "key=val&keys=value" ) 類型格式。
注：一般用這種格式。
例子：（這里我們手動拼接表單類型提供的參數）
格式2：
xhr.setRequestHeader('Content-Type','application/json')。即JSON對象格式。
但是，在將參數傳入send（）方法前，必須用JSON.stringify()將此轉成JSON格式字符串再傳入，因為只能傳輸字符串格式。
例子：
二、post請求中，用FormData（）方法發送數據多的參數，如表單類型參數、圖片和視頻等二進制文件，等等
1.用FormData()方法傳輸表單類型參數
注意點：提交表單中的input按鈕類型設置為button，不要設置為submit，否則會按照默認格式提交
1）例子：
2）formData()方法的實例還有以下兩個方法
獲取表單對象中屬性的值：formData.get('key');
設置表單對象中屬性的值：formData.set('key');
刪除表單對象中屬性的值：formData.delete('key');=>用於刪除登錄時候輸入兩次密碼的其中一個
2.用FormData()方法傳輸圖片二進制類型參數
預覽上傳的圖片：
jQuery中使用FormData（）上傳文件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/jquery.js"></script> </head> <body> <input type="file" id="file1" /> <button id="btnUpload">上傳文件</button> <br /> <img src="./images/loading.gif" alt="" style="display: none;" id="loading" /> <script> $(function () { // 監聽到Ajax請求被發起了 $(document).ajaxStart(function () { $('#loading').show() }) // 監聽到 Ajax 完成的事件 $(document).ajaxStop(function () { $('#loading').hide() }) $('#btnUpload').on('click', function () { var files = $('#file1')[0].files if (files.length <= 0) { return alert('請選擇文件后再上傳！') } var fd = new FormData() fd.append('avatar', files[0]) // 發起 jQuery 的 Ajax 請求，上傳文件 $.ajax({ method: 'POST', url: 'http://www.liulongbin.top:3006/api/upload/avatar', data: fd, processData: false, //必須 contentType: false, //必須 success: function (res) { console.log(res) } }) }) }) </script> </body> </html>