Axios/POST/Spring MVC使用示例

亦凉 2022-09-02 01:17 125阅读 0赞

背景：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));
    }

# 其他 #

虽然`Post`方式用着不方便，但还是推荐使用的。因为一旦熟悉了，可以避免很多问题。因为`GET`方法链接可以在浏览器打开，毫无安全性可言；再者还有个很让人讨厌的缓存问题。