axios html 使用模板

最新推荐文章于 2024-07-25 11:52:08 发布

小二·

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量235

点赞数 4

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_52208686/article/details/137591535

版权

引入

 本地 ： <script src="axios/axios.min.js"></script>
网络路径 ：<script src="https://cdn.jsdelivr.net/npm/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="axios/axios.min.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 = "";
            var paramsobj = {};
            axios.get(url,{params:paramsobj}).then(function (res) {
                var data = res.data;
                console.log(data);
            });
        });
        document.querySelector("#btn1").addEventListener("click",function (params) {
            var url = "";
            var dataobj = {};
            axios.post(url,{params:dataobj}).then(function (res) {
                console.log(res.data);
            });
        })
        document.querySelector("#btn2").addEventListener("click",function (params) {
            var url = "";
            var paramsdata = {};
            axios({
                url:url,
                method:'GET',
                params:paramsdata
            }).then(function (res) {
                console.log(res.data);
            });
        });
        document.querySelector("#btn3").addEventListener("click",function (params) {
            var url = "";
            var paramsdataa = {};
            axios({
                url:url,
                method:'POST',
                data:paramsdataa
            }).then(function (res) {
                console.log(res.data);
            });
        });
    </script>
</body>
</html>

模板：

 get：

axios.get(url,{key:value}).then(function(){
	//回调函数
});

模板：

       axios({
                url:url,
                method:'POST',//'GET'
                data:paramsdataa,//post保留
                params:paramsdataa,//get保留
            }).then(function (res) {
                console.log(res.data);
            });