POST请求的三种常见格式

POST 请求的三种常见数据提交格式 - SegmentFault 思否

post请求:

params:放在请求的url里,后台用@RequestParam接收

POST请求的三种常见格式_第1张图片

body:放在请求的body里,后台接收方式分别如下:

  • Content-Type:x-www-form-urlencoded:@RequestParam接收到的是value值 @RequestBody是接收到的键值对
  • Content-Type:multipart/form-data:@RequestParam、@RequestBody、@RequestPart 均可
  • Content-Type:application/json:@RequestBody才行
  • POST请求的三种常见格式_第2张图片

1)表单放params里:若后端使用@RequestParam 来接收前端传过来的参数的,Content-Type要设置为application/x-www-form-urlencoded,并且需要对data使用qs.stringify换成键值对的形式;参数放在url body里进行传递

// @RequsetParam请求
const postRequestParam = (url, params, type) => {
  let baseUrl = getBaseUrl(type);
  return axios({
    method: "post",
    url: `${baseUrl}${url}`,
    data: params,
    transformRequest: [//放params里要将data转为k=v&k1=v1(可以用qs库qs.stringify)
      function (data) {
        let ret = "";
        for (let it in data) {
          ret +=
            encodeURIComponent(it) + "=" + encodeURIComponent(data[it]) + "&";
        }
        return ret;
      }
    ],
    headers: {//放params里要将Content-Type设置为application/x-www-form-urlencoded
      "Content-Type": "application/x-www-form-urlencoded"
    }
  });
};


2)json放body里:若后端使用@RequestBody 来接收前端传过来的参数的,Content-Type要设置为application/json;参数放在body里进行传递  (axios默认放body)

// @RequestBody请求
const postRequestBody = (url, params) => {
  return axios({
    method: "post",
    url: `${base}${url}`,
    data: params,
    headers: { //放body要时,Content-Tpye为application/json,默认值也是这个
      "Content-Type": "application/json",
      charset: "utf-8"
    }
  });
};

3)文件放body里:如果传递的是文件,需设置"Content-Type: multipart/form-data"

使用 FormData() 构造函数,浏览器会自动识别并添加请求头 "Content-Type: multipart/form-data"

实际上是放在body里传递的。

const params = new FormData();
params.append('file', this.file);
axios.post({url,params}) 
//axios.post({url,data:params}) 即使不写data,默认是data放body里

你可能感兴趣的:(http)