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)