download:前端支流布局零碎进阶与实战

@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);        } 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'}))

阅读器请求详情

1534052079504.png

application/x-www-form-urlencoded

服务端,springboot

@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)