POST四种请求格式前后端代码示例-白红宇

application/json

服务器端使用spring boot

@RestControllerpublic 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);            } else {                console.error(xhr.statusText);            }        }    };    xhr.open('POST','/hello');    xhr.setRequestHeader('Content-Type', 'application/json');    xhr.send(JSON.stringify({ name:'zhuwei', age:'25', hobby:'ball'}))复制代码

浏览器请求详情

application/x-www-form-urlencoded

服务端，springboot

@RestControllerpublic 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 表单

或者使用 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)复制代码

浏览器请求详情

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。

注意：

使用FormData()生成数据

不手动添加content-type请求头

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)复制代码

2.发送文件

服务端代码

@CrossOrigin@RestControllerpublic class GreetingController {    @RequestMapping(value = "/helloFile", method = RequestMethod.POST)    public void getFile(@RequestParam("file") MultipartFile file) {        System.out.print(file.getSize());    }}复制代码

客户端采用<input type=file>发送文件

注意：form需要加上enctype="multipart/form-data"，因为form表单的默认编码方式是application/x-www-form-urlencoded

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('我是小明')复制代码

总结

POST常用发送方式有四种，其实是http请求的四种content-type
- application/json
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain

表单提交默认使用 application/x-www-form-urlencoded，可以通过设置enctype属性改变默认提交方式，表单不支持application/json类型。想发json类型的请求，只能通过ajax。

上传文件只能通过multipart/form-data,但multipart/form-data也可以传键值对