POST提交數據之---Content-Type的理解；
Content-Type是指http/https發送信息至服務器時的內容編碼類型，contentType用於表明發送數據流的類型，服務器根據編碼類型使用特定的解析方式，獲取數據流中的數據。
在網絡請求中，常用的Content-Type有如下：
text/html, text/plain, text/css, text/javascript, image/jpeg, image/png, image/gif,
application/x-www-form-urlencoded, multipart/form-data, application/json, application/xml 等。
其中：text/html, text/plain, text/css, text/javascript, image/jpeg, image/png, image/gif, 都是常見的頁面資源類型。
application/x-www-form-urlencoded, multipart/form-data, application/json, application/xml 這四個是ajax的請求，表單提交或上傳文件的常用的資源類型。
form表單中可以定義enctype屬性，該屬性的含義是在發送到服務器之前應該如何對表單數據進行編碼。默認的情況下，表單數據會編碼為
"application/x-www-form-unlencoded".
enctype常用的屬性值如下：application/x-www-form-unlencoded： 在發送前編碼所有字符(默認情況下)；
multipart/form-data, 不對字符編碼。在使用文件上傳時候，使用該值。
一：application/x-www-form-urlencoded 主要用於如下:
1.1: 最常見的POST提交數據方式。
1.2：原生form默認的提交方式(可以使用enctype指定提交數據類型)。
1.3：jquery，zepto等默認post請求提交的方式。
1. 首先來看下form表單中post默認提交方式的數據；代碼如下：
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> </head> <body> <div id="app"> <form action="http://www.example.com" method="POST"> <p>username: <input type="text" name="fname" /></p> <p>age: <input type="text" name="age" /></p> <input type="submit" value="提交" /> </form> </div> </body> </html>
如下圖所示：
application/x-www-form-urlencoded 是最常用的一種請求編碼方式，支持GET/POST等方法，所有數據變成鍵值對的形式 key1=value1&key2=value2
的形式，並且特殊字符需要轉義成utf-8編號，如空格會變成 %20;
默認的提交方式是 application/x-www-form-urlencoded 編碼提交數據的，在chrome的network面板下，默認的請求體是被解析的。展示成formData的形式；
如下是使用ajax的方式提交的；
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> <script type="text/javascript" src="https://tugenhua0707.github.io/html5UploadImage/js/jquery.js"></script> </head> <body> <div id="app"> <div class="btn">發送post請求</div> </div> <script> var obj = { "name": 'CntChen', "info": 'Front-End', }; $('.btn').click(function() { $.ajax({ url: 'www.example.com', type: 'POST', dataType: 'json', data: obj, success: function(d) { } }) }); </script> </body> </html>
如下圖所示：
如上默認提交的 contentType為 application/x-www-form-urlencoded，此時提交的數據將會格式化成：
username=111&age=2;
如果請求類型type是GET的話，那么格式化的字符串將直接拼接在url后發送到服務端； 如果請求類型是POST, 那么格式化的字符串將放在http body的Form Data中發送。
二：multipart/form-data
使用表單上傳文件時，必須指定表單的 enctype屬性值為 multipart/form-data. 請求體被分割成多部分，每部分使用 --boundary分割；
html代碼如下：
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> </head> <body> <div id="app"> <form action="http://www.example.com" method="POST" enctype="multipart/form-data"> <p>username: <input type="text" name="fname" /></p> <p>age: <input type="text" name="age" /></p> <input type="submit" value="提交" /> </form> </div> </body> </html>
如下圖所示：
三：application/json
在http請求中，ContentType都是默認的值 application/x-www-form-urlencoded, 這種編碼格式的特點是：name/value值對，
每組之間使用&連接，而name與value之間是使用 = 連接，比如 key=xxx&name=111&password=123456; 鍵值對一般的情況下是沒有什么問題的，
是很簡單的json形式，比如如下：
{
a: 1, b: 2 }
它會解析成 a=1&b=2這樣的，但是在一些復雜的情況下，比如需要傳一個復雜的json對象，也就是對象嵌套數組的情況下，比如如下代碼：
{
obj: [
{
"name": 111, "password": 22 } ] }
這樣復雜的對象，application/x-www-form-urlencoded這種形式傳遞的話， 會被解析成 obj[0]['name']=111&obj[0].['password']=2這樣的。
然后再轉成json形式；
{
"obj": [ { "name": 111, "password": 22 } ] }
對於一些復制的數據對象，對象里面再嵌套數組的話，建議使用application/json傳遞比較好，開發那邊也會要求使用application/json。因為他們那邊不使用application/json的話，使用默認的application/x-www-form-urlencoded傳遞的話，開發那邊先要解析成如上那樣的，
然后再解析成json對象，如果對於比上面更復雜的json對象的話，那么他們那邊是很解析的，所以直接json對象傳遞的話，對於他們來說更簡單。
通過json的形式將數據發送給服務器。json的形式的優點是它可以傳遞結構復雜的數據形式，比如對象里面嵌套數組這樣的形式等。
如下代碼：
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> <script type="text/javascript" src="https://tugenhua0707.github.io/html5UploadImage/js/jquery.js"></script> </head> <body> <div id="app"> <div class="btn">發送post請求</div> </div> <script> $('.btn').click(function() { $.ajax({ url: 'http://www.example.com', type: 'POST', dataType: 'json', contentType: 'application/json', data: JSON.stringify({a: [{b:1, a:1}]}), success: function(d) { } }) }); </script> </body> </html>
但是如上代碼，在瀏覽器運行后，發現跨域了，我們看如下截圖所示：
3.1 理解ajax跨域設置 ContentType: application/json
在使用ajax跨域請求時，如果設置Header的ContentType為 application/json，它會發兩次請求，第一次先發Method為OPTIONS的請求到服務器，
這個請求會詢問服務器支持那些請求方法(比如GET,POST)等。如果這個請求支持跨域的話，就會發送第二個請求，否則的話在控制台會報錯，第二個請求不會請求。如下我們做個簡單的demo，不跨域的如下：
如下的代碼：
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> <script type="text/javascript" src="https://tugenhua0707.github.io/html5UploadImage/js/jquery.js"></script> </head> <body> <div id="app"> <div class="btn">發送post請求</div> </div> <script> $('.btn').click(function() { $.ajax({ url: 'http://localhost:8081/api.json', type: 'POST', dataType: 'json', contentType: 'application/json', data: JSON.stringify({a: [{b:1, a:1}]}), success: function(d) { } }) }); </script> </body> </html>
如下圖所示：
如上我們可以看到json格式提交的數據會顯示 Request Payload;