在与server端进行数据传递时，通常会用到GET、POST方法进行参数提交，而参数提交的方式，通常取决于server端对数据的接收方式。
本文对几种常见的参数提交方式进行归纳及简述，这不是一篇科普文，不严谨处见谅，仅供参考。
Query String Parameters
当发起一次GET请求时，参数会以url string的形式进行传递。即?后的字符串则为其请求参数，并以&作为分隔符。
如下http请求报文头：
// General
Request URL: http://foo.com?x=1&y=2
Request Method: GET
// Query String Parameters
x=1&y=2
Form Data
当发起一次POST请求时，若未指定content-type，则默认content-type为application/x-www-form-urlencoded。即参数会以Form Data的形式进行传递，不会显式出现在请求url中。
如下http请求报头：
// General
Request URL: http://foo.com
Request Method: POST
// Request Headers
content-type: application/x-www-form-urlencoded; charset=UTF-8
// Form Data
x=1&y=2
Request Payload
当发起一次POST请求时，若content-type为application/json，则参数会以Request Payload的形式进行传递（显然的，数据格式为JSON），不会显式出现在请求url中。
如下http请求报头：
// General
Request URL: http://foo.com
Request Method: POST
// Request Headers
content-type: application/json; charset=UTF-8
// Request Payload
x=1&y=2
如果希望通过Form Data的方式来传递数据，则可以通过原生方法formData()来进行数据组装，且content-type需要设置为multipart/form-data。
如下http请求报头：
// General
Request URL: http://foo.com
Request Method: POST
// Request Headers
content-type: multipart/form-data; charset=UTF-8
// Request Payload
------WebKitFormBoundaryAIpmgzV8Ohi99ImM
Content-Disposition: form-data; name="x"
1
------WebKitFormBoundaryAIpmgzV8Ohi99ImM
Content-Disposition: form-data; name="y"
2
------WebKitFormBoundaryAIpmgzV8Ohi99ImM--
其中，WebKitFormBoundaryAIpmgzV8Ohi99ImM为浏览器随机生成的boundary，作为分隔参数，作用等同于&。
application/x-www-form-urlencoded 和 multipart/form-data
The content type "application/x-www-form-urlencoded" is inefficient for sending large quantities of binary data or text containing non-ASCII characters. The content type "multipart/form-data" should be used for submitting forms that contain files, non-ASCII data, and binary data.
multipart/form-data的优势还伴随一些兼容性问题，详细请参考文章结束的参考文献。
参考文献
https://www.w3.org/TR/html401/interact/forms.html#h-17.13.4.1
https://developer.mozilla.org/en-US/docs/Web/API/FormData
https://www.cnblogs.com/ChengWuyi/p/7117060.html
http://www.cnblogs.com/zourong/p/7340498.html
https://tools.ietf.org/html/draft-ietf-httpbis-p3-payload-14#section-3.2
https://stackoverflow.com/questions/23118249/whats-the-difference-between-request-payload-vs-form-data-as-seen-in-chrome
https://stackoverflow.com/questions/3508338/what-is-the-boundary-in-multipart-form-data
网友评论