axios post请求

作者：马育民 • • 阅读：10308

说明

根据 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格式的数据：

java代码：request 方式获取

见：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类

代码：

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参数，详见 链接

后端代码

通过 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>

<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;
}
吉ICP备15003043号