Axios中params和data的区别
axios中参数params和data的使用区别
·
1、params的用法
a、前端页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<base href="http://localhost:8080/myssm01/">
</head>
<body>
<button onclick="click01('get')">get请求</button>
<button onclick="click01('post')">post请求</button>
<button onclick="click01('put')">put请求</button>
<button onclick="click01('delete')">delete请求</button>
</body>
<script>
function click01(med) {
axios({
method:med,
url:'tes',
params: {
name:'楠小弟',
age:12
}
}).then(function (rs) {
let d = rs.data;
alert(d);
})
}
</script>
</html>
b、页面效果
c、后端controller
@RestController
@RequestMapping("/tes")
public class TestController {
@GetMapping
public String getTes(String name,Integer age){
System.out.println("get:"+name+"=="+age);
return name+"=="+age;
}
@PostMapping
public String postTes(String name,Integer age){
System.out.println("post:"+name+"=="+age);
return name+"=="+age;
}
@PutMapping
public String putTes(String name,Integer age){
System.out.println("put:"+name+"=="+age);
return name+"=="+age;
}
@DeleteMapping
public String deleteTes(String name,Integer age){
System.out.println("delete:"+name+"=="+age);
return name+"=="+age;
}
}
c、结果
- 1、都能得到数据且返回
2、data的用法
a、把上面html中的axios请求params参数换成data
<script>
function click01(med) {
axios({
method:med,
url:'tes',
data: {
name:'楠小弟',
age:12
}
}).then(function (rs) {
let d = rs.data;
alert(d);
})
}
</script>
b、结果：都为null
c、在后端添加一个TestUs.java类
public class TestUs {
private String name;
private Integer age;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
}
d、更改controller的配置：接收json数据
@RestController
@RequestMapping("/tes")
public class TestController {
@GetMapping
public String getTes(@RequestBody TestUs t){
System.out.println("get:"+t.getName()+"=="+t.getAge());
return t.getName()+"=="+t.getAge();
}
@PostMapping
public String postTes(@RequestBody TestUs t){
System.out.println("post:"+t.getName()+"=="+t.getAge());
return t.getName()+"=="+t.getAge();
}
@PutMapping
public String putTes(@RequestBody TestUs t){
System.out.println("put:"+t.getName()+"=="+t.getAge());
return t.getName()+"=="+t.getAge();
}
@DeleteMapping
public String deleteTes(@RequestBody TestUs t){
System.out.println("del:"+t.getName()+"=="+t.getAge());
return t.getName()+"=="+t.getAge();
}
}
e、结果
- 除了get 其余都能接收到数据
f、使用params，后端接受使用json格式
<script>
function click01(med) {
axios({
method:med,
url:'tes',
data: {
name:'楠小弟',
age:12
}
}).then(function (rs) {
let d = rs.data;
alert(d);
})
}
</script>
- 后端代码同上
g、结果
- 全部报错
3、总结
a、使用params的情况
- 若只需从前端得到2个以内的数据可用params，后端 形参和前端 传输时保持一致
- 前端
<script>
function click01(med) {
axios({
method:med,
url:'tes',
params: {
name:'楠小弟',
age:12
}
}).then(function (rs) {
let d = rs.data;
alert(d);
})
}
</script>
- 后端
@GetMapping
public String getTes(String name,Integer age){
System.out.println("get:"+name+"=="+age);
return name+"=="+age;
}
b、使用data的情况
- 从前端获得多个数据时，可使用data，后端使用 json接收
- 前端
<script>
function click01(med) {
axios({
method:med,
url:'tes',
data: {
name:'楠小弟',
age:12
}
}).then(function (rs) {
let d = rs.data;
alert(d);
})
}
</script>
- 后端
@PostMapping
public String postTes(@RequestBody TestUs t){
System.out.println("post:"+t.getName()+"=="+t.getAge());
return t.getName()+"=="+t.getAge();
}
- 注意，使用此方式不适用于 get请求传参
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)