1.前端要把數據發送到服務器,一般有兩種方式:通過form表單提交;通過Ajax(xhr對象)發送。
2.通過Ajax(xhr對象)發送數據時,發送的數據的形式可以為FormData對象或json字符串。
3.通過這兩種方式發送數據時,常見的Content-Type請求頭的值如下:
| Content-Type的值 | form表單 | Ajax(xhr) |
| multipart/form-data | 可以通過enctype屬性設置 | 發送的數據形式為FormData時的默認值 |
| application/x-www-form-urlencoded | 默認。即未設置enctype屬性時的默認值 | 可以通過setRequestHeader方法設置 |
| application/json | 不支持。可以通過enctype屬性設置,但提交時會自動轉為application/x-www-form-urlencoded | 可以通過setRequestHeader方法設置 |
| text/plain | 可以通過enctype屬性設置 | 發送的數據形式為字符串時的默認值。包括JSON.Stringify方法返回的json字符串 |
以上內容在Chrome瀏覽器與新版的Edge瀏覽器下測試。
注意:
1.如果需要上傳文件到服務器,則必須使用multipart/form-data;
2.form表單中可以通過修改form元素的enctype屬性值來修改Content-Type,其值可以取multipart/form-data,application/x-www-form-urlencoded,text/plain三者之一;
3.xhr中可以通過setRequestHeader來設置Content-Type,其值可以取上面表格顯示的四種類型中的任何一種;
4.nodejs的Express框架中的body-parser中間件可以解析application/x-www-form-urlencoded,applicaion/json兩種類型的值。當Content-Type的值為這兩種類型時,提交上來的內容會被自動解析並放入req.body中;當Content-Type的值為multipart/form-data,text/plain時,提交的內容不會被自動解析,此時req.body為{};
5.服務器端接收不到前端提交上來的數據時,一個可能的原因是請求頭的Content-Type值沒有正確設置。
