axios发送ajax请求

最新推荐文章于 2025-02-25 18:51:08 发布

于小猿

最新推荐文章于 2025-02-25 18:51:08 发布

阅读量527

点赞数

分类专栏：笔记文章标签： vue js ajax axios

本文链接：https://blog.youkuaiyun.com/YyjYsj/article/details/113830920

版权

笔记专栏收录该内容

54 篇文章

订阅专栏

1、axios是一个独立的部分，不是vue中的一部分，但是经常将axios和vue一起使用，实现ajax操作。

2、使用场景

3、使用步骤

①、创建HTML页面，引入js文件，包含两个js文件，vue和axios

②、创建一个json文件，写一段json代码，用于后面的调用

{
    "success":true,
    "code":20000,
    "message":"成功",
    "data":{
        "items":[
            {"name":"zhangsan","age":20},
            {"name":"lisi","age":22},
            {"name":"wangwu","age":24}
        ]
    }
}

③、编写axios代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">

    </div>
    <script src="vue.min.js"></script>
    <script src="axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            //固定的结构
            data: {//在data中定义变量和初始值
                //定义变量，数组值为空
                userlist:[]
            },
            created(){//页面渲染之前执行
                //调用定义的方法
                this.getUserList()//this代表当前这个vue对象
            },
            methods:{//编写具体的方法 
                //创建方法，查询所有用户的数据
                getUserList(){
                    //使用axios发送ajax请求
                    //axios.提交方式("请求接口路径").then(箭头函数).catch()
                    axios.get("data.json")//以后真正写项目时这里填写请求的路径，比如：axios.get('http://localhost:8081/admin/ucenter/member')
                        .then(response => {//response就是请求之后返回的数据
                            console.log(response)
                        })//请求成功执行then方法，response可以随便起，也可以是abc
                        .catch(error => {

                        })//请求失败执行catch方法，error可以随便起，也可以是abc
                }
            }
        })
    </script>
</body>

</html>

④、在浏览器中运行

⑤、可以看到在浏览器控制台中输出了这个对象，说明已经实现了ajax操作。

⑥、依次展开

⑦、修改代码，获取具体数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 把userlist数组里面的数据，使用v-for指令显示到前端页面上 -->
        <div v-for="user in userlist">
            {{user.name}} -- {{user.age}}
        </div>
    </div>
    <script src="vue.min.js"></script>
    <script src="axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            //固定的结构
            data: {//在data中定义变量和初始值
                //定义变量，数组值为空
                userlist:[]
            },
            created(){//页面渲染之前执行
                //调用定义的方法
                this.getUserList()//this代表当前这个vue对象
            },
            methods:{//编写具体的方法 
                //创建方法，查询所有用户的数据
                getUserList(){
                    //使用axios发送ajax请求
                    //axios.提交方式("请求接口路径").then(箭头函数).catch()
                    axios.get("data.json")//以后真正写项目时这里填写请求的路径，比如：axios.get('http://localhost:8081/admin/ucenter/member')
                        .then(response => {//response就是请求之后返回的数据
                            //console.log(response)
                            //通过response获取具体数据，赋值给定义的空数组
                            this.userlist = response.data.data.items
                        })//请求成功执行then方法，response可以随便起，也可以是abc
                        .catch(error => {

                        })//请求失败执行catch方法，error可以随便起，也可以是abc
                }
            }
        })
    </script>
</body>

</html>