常见的POST提交数据方式_post,params = {"phone","password"}-CSDN博客

HTTP的请求方法POST是再常见不过的了，这里详细地说明四种常用的提交数据方案，巩固下基础。

在说POST之前，先看下HTTP请求的结构，分为三个部分：状态行、请求头、消息主体

<entity-body>

我们在代码中，通过new一个XMLHttpRequest实例时，就是创建了一个http请求，然后我们会指定使用GET、POST、UPDATE、DELETE等方法，以及请求的URL地址。对于POST而言，数据是放在消息主体中，但是并没有规定必须使用什么编码，我们可以自己决定消息主体的格式。

请求发送到服务端，需要服务端解析成功才有用。通常，是根据请求头中的Content-Type字段来判断消息主体用的是哪种方式编码，再对主体进行解析。所以，POST提交数据，涉及到Content-Type和消息主体编码方式两部分。

1.application/x-www-form-urlencoded

这是最常见的POST提交数据的方式了。原生的form表单，如果不设置enctype属性，最终就是以application/x-www-form-urlencoded方式提交数据。类似：

POST http://www.example.com HTTP/1.1 

Content-Type: application/x-www-form-urlencoded;charset=utf-8

title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3

提交的数据按照key1=val1&key2=val2的方式进行编码，key和val都进行了转码。很多封装的库中的ajax请求，也是默认使用这种方式，jquery和axios

2.multipart/form-data

也是一种常见的POST提交方式，在使用表单上传文件时，必须让form表单的enctype等于multipart/form-data

POST http://www.example.com HTTP/1.1
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA

------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="text"

title
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png

PNG ... content of chrome.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

这种方式一般用于上传二进制文件，例如图像、视频这种。

3.application/json;charset=utf-8

POST提交json格式的数据，告诉服务器消息主体是序列化后的JSON字符串。支持比键值对更加复杂的结构化数据。

    ajax: {
        url: '/users/login_success',
        method: 'POST',
        data: function(){
            return JSON.stringify({
                "phone": phone.value,
                "password": password.value
            })
        },
        success: function(res){
            console.log(res);
        },
        
    }