内容目录
html里面使用axios
效果展示：
CDN
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="000/axios-master/lib/axios.js"></script>
</head>
<body>
<button id="btn">axios使用get提交数据</button>
<button id="btn1">axios使用post提交数据</button>
<button id="btn2">直接使用axios发送get提交数据</button>
<button id="btn3">直接使用axios发送post提交数据</button>
<script>
var btn = document.querySelector("#btn");
btn.addEventListener("click",function (params) {
var url = "http://www.liulongbin.top:3006/api/get";
var paramsobj = {name:'zs',age:20};
axios.get(url,{params:paramsobj}).then(function (res) {
var data = res.data;
console.log(data);
});
});
document.querySelector("#btn1").addEventListener("click",function (params) {
var url = "http://www.liulongbin.top:3006/api/post";
var dataobj = {location:'zs',address:'zs'};
axios.post(url,{params:dataobj}).then(function (res) {
console.log(res.data);
});
})
document.querySelector("#btn2").addEventListener("click",function (params) {
var url = "http://www.liulongbin.top:3006/api/get";
var paramsdata = {name:'zss',age:20};
axios({
url:url,
method:'GET',
params:paramsdata
}).then(function (res) {
console.log(res.data);
});
});
document.querySelector("#btn3").addEventListener("click",function (params) {
var url = "http://www.liulongbin.top:3006/api/post";
var paramsdataa = {name:'钢铁侠',age:35};
axios({
url:url,
method:'POST',
data:paramsdataa
}).then(function (res) {
console.log(res.data);
});
});
</script>
</body>
</html>
注意事项：
1，axios可以发送get，post请求,两者请求方式类似;但是注意请求参数的书写。最好将其写全。
2，注意请求模板的样式：
axios.get(url,{params:参数}).then(function(){
//回调函数
});3，发送axios请求
axios({
url:url,
method:'POST',//'GET'
data:paramsdataa,//post保留
params:paramsdataa,//get保留
}).then(function (res) {
console.log(res.data);
});
