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;
    }
}

默认方式提交-传字符串

传递字符串时,与普通方式提交参数相同,不需要额外处理

前端代码-拼接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;
}

表单方式提交-FormData

可以实现 表单方式提交 的效果,后端代码可以用 request.getParameter() 方式接收参数

而且可以 上传文件

post发送数据方式: Content-Type: multipart/form-data

前端代码

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

<script>

let formData = new FormData();
formData.append("username", "lilei");
formData.append("password", "123456")
formData.append('file', this.file);


var config = {
    headers: {
        'Content-Type': 'multipart/form-data'
    }
};

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

发送头信息

axios.post('http://localhost:8080/web_war_exploded/testJWT', '',{
    headers: {
        'auth': localStorage.getItem('auth')
    }
})
.then(res => {
    console.log(res);
})
.catch(erro => {// 请求失败处理
    console.log(error);
});

原文出处:https://malaoshi.top/show_1IXIZt4apDp.html