axios post请求-马育民老师

# 说明

根据 [post发送数据的4种方式](https://www.malaoshi.top/show_1IX34OQ6R04p.html "post发送数据的4种方式") 可知，发送数据有4种方式

本文讲解 axios post请求 的2种情况：

1. 传json对象，后端需要做额外处理（默认）
2. 传字符串，与表单提交相同

# 发送json格式（默认方式）

如果发送 `json` 对象，那么 **post发送数据方式：** `Content-Type: application/json`

**注意：**服务器需要做 **额外处理**

### 前端代码

```
<script src="https://cdn.staticfile.org/axios/0.20.0/axios.min.js"></script>
<script>
axios.post('/reg', {
    username: 'lilei',
    password: '123456'
  })
  .then(function (res) {
    console.log(res);
  })
  .catch(function (error) {// 请求失败处理
    console.log(error);
  });
</script>
```

如下图，是json格式的数据：
[![](https://www.malaoshi.top/upload/pic/axios/QQ20210206095548.png)](https://www.malaoshi.top/upload/pic/axios/QQ20210206095548.png)

### java代码：request 方式获取

见：[request获取 PayLoad 数据（application/json ）](https://www.malaoshi.top/show_1IX2o7i0cKbJ.html "request获取 PayLoad 数据（application/json ）")

### java代码：springmvc代码

注意加上 `@RequestBody`

```
@PostMapping("/reg")
public JsonResult reg(@RequestBody User user){
    JsonResult res=new JsonResult(0,"success");

System.out.println(user);
    return res;
}
```

##### User类

[![](https://www.malaoshi.top/upload/pic/axios/QQ20210206103310.png)](https://www.malaoshi.top/upload/pic/axios/QQ20210206103310.png)

代码：

```
public class User {
    private String password;
    private String username;

public String getUsername() {
        return username;
    }

public void setUsername(String username) {
        this.username = username;
    }

public String getPassword() {
        return password;
    }

public void setPassword(String password) {
        this.password = password;
    }
}
```

# 发送字符串

传递字符串时，后端通过 `request.getParameter()` 获取

**注意**：前端需要做额外处理

### 前端代码-拼接url参数

```
axios.post('http://localhost:8080/web_war_exploded/login', 
    'username=lilei&password=123456'
)
.then(res => {
    console.log(res);
})
.catch(error => {
    console.log(error);
});
```

### 前端代码-将json对象转成url参数

**注意：** **有缺陷**，JSON对象里面不能有 JSON对象，否则不能正常转换。可以使用 qs 库

```
//要发送的数据，json格式
var json = {
        username:'李雷',
        password:'sf83*(^(&'
    }
//将json格式转成url参数格式
var params = Object.keys(json).map(function (key) {
                // body...
                return encodeURIComponent(key) + "=" + encodeURIComponent(json[key]);
            }).join("&");

console.log(params)

//发送数据
axios.post('http://localhost:8080/web_war_exploded/login', params)
.then(res => {
    console.log(res);
})
.catch(error => {
    console.log(error);
});
```

### 前端代码-使用 qs 库

通过 qs 将 `json` 对象转成 **url参数**，详见 [链接](https://www.malaoshi.top/show_1IX2oYK9zXOe.html "链接")

### 后端代码

通过 `request.getParameter()` 获取

# 使用 URLSearchParams 封装数据

用 `URLSearchParams` 封装数据，然后发送数据，可以实现 **表单方式提交** 的效果，后端代码可以用 `request.getParameter()` 方式接收参数

**post发送数据方式：** `application/x-www-form-urlencoded`

**方法:**

|方法   |描述   |
| ------------ | ------------ |
|append()|            	添加新的key/value到URL中。|
|delete()|            	删除所有匹配的key/value值,重复的key都被删除。|
|entries()|            	返回所有键值对key/value。|
|get()|            	返回与给定key匹配的第一个value值。|
|getAll()|            	返回所有与给定key匹配value值。|
|has()|            	查询指定key是否存在，返回一个布尔值。|
|keys()|            	返回所有键key。|
|set()|   	设置key的value值。|
|toString()|            	返回URL字符串。|
|values()|            	返回所有值。|

### 前端代码

```
<script src="https://cdn.staticfile.org/axios/0.20.0/axios.min.js"></script>

let params = new URLSearchParams();
params.append("username", "lilei");
params.append("password", "123456")

axios.post('/login', params)
  .then(function (res) {
    console.log(res);
  })
  .catch(function (error) {// 请求失败处理
    console.log(error);
  });
</script>
```

### java代码

```
@PostMapping("/login")
public JsonResult login(User user){
    JsonResult res=new JsonResult(0,"success");

System.out.println(user);
    return res;
}
```

原文出处：http://www.malaoshi.top/show_1IXIZt4apDp.html