POST四种请求格式 前后端代码示例

方式一：application/json

@RestController
public class GreetingController {    
    //解析application/json
    @RequestMapping(value = "/hello", method = RequestMethod.POST)    
    public Object getJson(@RequestBody Object obj) {        
        return obj;
    }
}

客户端，原生ajax

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function (ev) {        
  console.log(xhr.readyState);        
  if (xhr.readyState === 4){            
    if (xhr.status === 200){                
      console.log(xhr.responseText);
    }
  }
};
xhr.open('POST','/hello');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ name:'zhuwei', age:'25', hobby:'ball'}))

客户端，axios

export function hello(data) {
  return request({
    url: '/hello',
    method: 'post',
    data: JSON.stringify(data),
    headers: {
      'Content-Type': 'application/json;charset=UTF-8'
    }
  })
}

方式二：application/x-www-form-urlencoded

@RestController
public class GreetingController {    
    //解析application/x-www-form-urlencoded
    @RequestMapping(value = "/helloFormUrl", method = RequestMethod.POST)    
    public String getForm(@RequestParam("name") String name,
                          @RequestParam("age") String age) {        
        return "name="+name+"&"+"age="+age;
    }
}

客户端，html form 表单

<form action="/helloFormUrl" method="post">
  <input type="text" name="name" />
  <input type="text" name="age" />
  <input type="submit" />
</form>

或者使用 ajax

    var xhr = new XMLHttpRequest()
    xhr.onreadystatechange = function (ev) {        
      console.log(xhr.readyState);        
      if (xhr.readyState === 4){            
        if (xhr.status === 200){                
          console.log(xhr.responseText);
        } else {                
          console.error(xhr.statusText);
        }
      }
    };    
    //生成 post 参数 params，有三种方法，选一种
    //1. 使用URLSearchParams 接口,会对内容进行utf8编码
    const params = new URLSearchParams();
    params.append('name', '小明');
    params.append('age', '18');    
    //2.使用encodeURIComponent 对内容进行编码
    //好处是url中的汉字等一些特殊字符会被转为utf8编码，减少出错
    const params = "name="+encodeURIComponent("小明")+"&age="+encodeURIComponent("19")  
    //3.不编码直接写，可能服务端会解码错误
    const params = "name=小明&age=19"
    xhr.open('POST','http://localhost:1234/helloFormUrl');
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send(params)

客户端 axios

// 方式一
const formData = new FormData();
formData.append('name', '小明')
formData.append('age', '18')
// 方式三
const params = new URLSearchParams();
params.append('name', '小明');
params.append('age', '18');  
export function hello(data) {
  return request({
    url: '/helloFormUrl',
    method: 'post',
    data: data,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  })
}

import qs from 'qs'
export function hello(data) {
  return request({
    url: '/helloFormUrl',
    method: 'post',
    data: qs.stringify(data),
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  })
}

使用qs序列化时，后台接收参数有变化

@RestController
public class GreetingController {    
    //解析application/x-www-form-urlencoded
    @RequestMapping(value = "/helloFormUrl", method = RequestMethod.POST)    
    public String getForm(User user) {        
        return "name="+name+"&"+"age="+age;
    }
}
class User {
    private String name;
    private String age;
    // get/set
}

方式三： multipart/form-data

1.发送键值对

服务端，springboot（和 application/x-www-form-urlencoded 的代码相同）

@RequestMapping(value = "/helloFormUrl", method = RequestMethod.POST)    
public String getForm(@RequestParam("name") String name,
                      @RequestParam("age") String age) {        
    return "name="+name+"&"+"age="+age;
}

客户端，ajax。
注意：

1. 使用FormData()生成数据
2. 不手动添加content-type请求头 ```javascript var xhr = new XMLHttpRequest()

xhr.onreadystatechange = function (ev) {
console.log(xhr.readyState);
if (xhr.readyState === 4){
if (xhr.status === 200){
console.log(xhr.responseText); } else {
console.error(xhr.statusText); } } };
const params = new FormData(); params.append(‘name’, ‘朱维’); params.append(‘age’, ‘18’);

xhr.open(‘POST’,’http://localhost:1234/helloFormUrl‘);

xhr.send(params)

<a name="sBoMx"></a>
#### 2.发送文件
服务端代码
```java
@CrossOrigin@RestController
public class GreetingController {    
    @RequestMapping(value = "/helloFile", method = RequestMethod.POST)    
    public void getFile(@RequestParam("file") MultipartFile file) {
        System.out.print(file.getSize());
    }
}

客户端采用发送文件
注意：form需要加上enctype=”multipart/form-data”，因为form表单的默认编码方式是application/x-www-form-urlencoded

<form action="http://localhost:1234/helloFile" method="post" 
      enctype="multipart/form-data">
    <input type="file" name="file" />
    <input type="submit" />
</form>

方式四 ：text/plain

@RequestMapping(value = "/helloText", method = RequestMethod.POST)    
public void getText(@RequestBody String str) {
    System.out.print(str);
}

客户端

    var xhr = new XMLHttpRequest()

    xhr.onreadystatechange = function (ev) {        
      console.log(xhr.readyState);        
      if (xhr.readyState === 4){            
        if (xhr.status === 200){                
          console.log(xhr.responseText);
        } else {                
          console.error(xhr.statusText);
        }
      }
    };

    xhr.open('POST','http://localhost:1234/helloText');
    xhr.setRequestHeader('Content-Type', 'text/plain');
    xhr.send('我是小明')