表单提交和ajax提交数据的请求区别

在http请求中，我们通常会看到请求字段以query string parameters，或form data，或request payload形式发送到服务器，究竟他们有什么区别呢？下面为您揭晓答案。

一、参考链接

https://www.cnblogs.com/camille666/p/form.html

https://www.cnblogs.com/camille666/p/file_upload.html

https://blog.csdn.net/a407479/article/details/77621999

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLFormElement/enctype

二、enctype是什么？

enctype是一个表单的属性，规定在发送到服务器之前应该如何对表单数据进行编码。enctype取值如下：

 application/x-www-form-urlencoded，在发送到服务器之前，所有字符都会进行编码（空格转换为"+"加号，特殊符号转换为ASCII HEX值）。
 multipart/form-data，不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
 text/plain，空格转换为"+"加号，但不对特殊字符编码。

三、请求分类

1、get请求

General
Request URL: https://www.xxx.com/api/getUserInfo
Request Method: GET
Status Code: 200 OK

Query String Parameters
username: camillehou666
tel: 17816165663

2、表单post请求

General
Request URL: https://www.xxx.com/api/getUserInfo
Request Method: POST
Status Code: 200 OK

Request Headers
Content-Type: application/x-www-form-urlencoded 

Form Data
username: camillehou666
tel: 17816165663

3、ajax的post请求

General
Request URL: https://www.xxx.com/api/getUserInfo
Request Method: POST
Status Code: 200 OK

Request Headers
Content-Type: text/plain;charset=UTF-8

Request Payload
username: camillehou666
tel: 17816165663

如果不指定Content-Type，默认就是text/plain;charset=UTF-8，所以需要指定Content-Type，xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")