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)