HTTP請求中 request payload 和 formData 區別?javascript
FormData和Payload是瀏覽器傳輸給接口的兩種格式,這兩種方式瀏覽器是經過Content-Type來進行區分的(瞭解Content-Type),若是是 application/x-www-form-urlencoded的話,則爲formdata方式,若是是application/json或multipart/form-data的話,則爲 request payload
的方式。
好比以下使用ajax方式的提交post請求的代碼(默認使用application/x-www-form-urlencoded編碼):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"> <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>
以下圖所示:html5
2. 使用 multipart/form-data表單上傳文件java
以下html代碼:jquery
<!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>
以下圖所示:git
能夠看到 使用multipart/form-data表單上傳文件時使用的是 Request Payload 格式;github
3. 使用 Content-Type: application/json 來編碼ajax
以下html代碼: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://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>
以下圖所示api