axios的基本使用
//使用默认方式发送无参请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./javascript/axios.min.js"></script>
<title>Document</title>
</head>
<body>
<script>
axios({//默认get请求
url:'https://ai.taobao.com/',
}).then(res=>{
console.log(res);
});
</script>
</body>
</html>
//axios发送get方式的有参请求【方式一】
<script>
axios({
url:'http://localhost:8080/student/getStudentById?id=1',
}).then(res=>{
console.log(res);
});
</script>
//axios发送get方式的有参请求【方式二】
<script>
axios({
url:'http://localhost:8080/student/getStudentById',
params:{
id:'1',
name:'zhangsan'
}
}).then(res=>{
console.log(res);
});
</script>
//使用post方式发送无参请求
<script>
axios({
url:'http://localhost:8080/student/getAllStudent',
method:'post'
}).then(res=>{
console.log(res);
})
</script>
//使用post方式发送有参请求【默认格式application/json】方式一
<script>
axios({
url:'http://localhost:8080/student/getStudentById',
method:'post',
data:{//后端接收为null,需要添加@RequestBody注解
id:1,
name:'zhangsan'
},
headers: {'Content-Type': 'application/json'}
}).then(res=>{
console.log(res);
});
</script>
<script>
let formData = JSON.stringify(this.dataObj); //将vue实例对象转换成json字符串
axios({
url:'http://localhost:8080/student/getStudentById',
method:'post',
data:formData ,
headers: {'Content-Type': 'application/json'}
}).then(res=>{
console.log(res);
});
</script>
方式二
<script>
axios({
url:'http://localhost:8080/student/getStudentById',
method:'post',
params:{//url上拼接参数，后端可以接受参数
id:1,
name:'zhangsan'
}
}).then(res=>{
console.log(res);
});
</script>
