Post请求变变变

Post请求没Get那么简单。这里写下几种Post请求的Spring Boot和Axios写法。

表单

表单历史悠久，从JSP到jQuery都在发表单。

Spring Boot

Controller方法中使用@RequestParam参数用于接受表单，参考Can I use @Requestparam annotation for a Post request?。

比如我写的一个登录方法，接受Post请求发送的name和password参数。

1
2
3

@RequestMapping("/login", method = [RequestMethod.POST])
    fun authWithPassword(@RequestParam name: String,
                         @RequestParam password: String)

Axios

表单有两种Content-Type，multipart/form-data或者application/x-www-form-urlencoded。它们在body储存数据的方式不同，服务器会根据Content-Type进行解析，参考四种常见的 POST 提交数据方式。jQuery的ajax使用application/x-www-form-urlencoded。

Axios也能发送表单数据，方法如下。其中最重要的是在post方法的第二个参数要输入FormData，而不是一个普通的字典。值得注意的是，Axios默认只支持发送Content-Type为multipart/form-data的表单数据，直接在标头的Content-Type上设置没有用。如果要发送x-www-form-urlencoded的form需要自己序列化字符串，然后设置标头的Content-Type，参考。

const axios = require('axios').default;
let url = apiUrl + "/login"
const bodyFormData = new FormData();
bodyFormData.append("name", name)
bodyFormData.append("password", password)

axios.post(url, bodyFormData).then(res =>{
    console.log(res.status)
    console.log(res.data)
})

JSON

Spring Boot

首先在controller文件中加入一个和JSON结构对应的Kotlin类。

class LoginBody (
    val name: String,
    val password: String
)

然后在方法中去掉@RequestParm，加入@RequestBody loginBody: LoginBody参数。

Axios

把用户名和密码封装到data中，然后发送。

const axios = require("axios")
let url = apiUrl + "/login"
let data = {
    "name": name,
    "password": password
}

axios.post(url, data).then(res =>{
    console.log(res.status)
    console.log(res.data)
})

Postman

Postman在发送Post请求的时候有几种选项，根据后端实现选择。对于Spring Boot，表单选form-data和x-www-form-urlencoded均可；json选raw json。

比较

form和json各有优势。form支持直接发送二进制的文件，而json需要转换为字符串。form在前端不需要依赖任何库。form在php后端上支持良好。json数据结构上可以设计的比form复杂，支持属性嵌套，而form只支持键值对。客户端对json支持度更好，因为封装json非常容易，表单反而麻烦。

对于Spring Boot和Axios来说两个选择都OK，我个人倾向于json，适合拓展和跨平台。