|
背景：Ajax的Post比较特殊，每次使用都要费尽周折，现将几种方法进行整理。
第一种方式
前端需要将JSON数据转换成query string再行提交，服务端接口无需特殊设置。
前端
import axios from 'axios'
import qs from 'query-string'
let data = {code: '001', tags: ['A', 'B', 'C']}
axios.post('/api/form/save', qs.stringify(data)).then(resp => {
console.log(resp.data)
})
Content-Type
Content-Type: application/x-www-form-urlencoded
服务端
@PostMapping(value = "/api/form/save")
@ResponseBody
public void editOrgAuthority(String code, String[] tags) {
log.info(code);
log.info(tags);
}
注意这里的集合不能使用List，否则会报错（不支持接口）。
也可以定义一个类去接收，这样字段类型就可以指定为List了，特别是参数较多的时候特别方便，如下：
@PostMapping(value = "/api/form/save")
@ResponseBody
public void editOrgAuthority(@ModelAttribute DataForm data) {
log.info(JSON.toJSONString(form));
}
第二种方式
直接向服务端发送JSON数据，不需要再使用qs模块转。
前端
import axios from 'axios'
let data = {code: '001', tags: ['A', 'B', 'C']}
axios.post('/api/form/save', data).then(resp => {
console.log(resp.data)
})
Content-Type
Content-Type: application/json;charset=UTF-8
服务端
@PostMapping(value = "/api/form/save")
@ResponseBody
public void editOrgAuthority(@RequestBody DataForm data) {
log.info(JSON.toJSONString(form));
}
|