Vue：axios

最新推荐文章于 2025-07-29 21:51:01 发布

原创最新推荐文章于 2025-07-29 21:51:01 发布 · 159 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

Vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在HTML页面中使用Vue.js和axios库进行HTTP请求，包括GET和POST方法，展示了如何获取和更新用户信息，以及处理查询字符串和请求头。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <button type="button" @click="f1">get</button>

        <button type="button" @click="f2">get</button>
        <button type="button" @click="f3">get</button>
        <p>用户名为：{{user.name}} ,电话号码为:{{user.phone}}</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                user: {
                    name: 'lisi',
                    phone: '12321321'
                }

            },
            methods: {
                f1: function () {
                    axios.get("http://localhost:80/test/user/1", {
                        //查询字符串
                        params: {
                            id: "25640392"
                        }
                    })
                        .then(function (res) {
                            console.log(res);
                            console.log(res.data);
                            app.user.name = res.data.data.username;
                            app.user.phone = res.data.data.mobile;
                        });

                },
                f2: function () {
                    // json
                    axios.post("http://localhost:80/test/user/1", { id: "jack" })
                        .then(function (res) {
                            console.log(res);
                        });
                },
                f3: function () {
                    axios({
                        url: "http://localhost:80/test/user/1",
                        method: "post",
                        params: {
                            //查询字符串
                            //设置请求行传值，url问号后面的参数 
                            s: "成都",
                            limit: 15
                        },
                        headers: {
                            //设置请求头
                            token: '123456'
                        },
                        data: {
                            //设置请求体（post/put）
                            //json
                            name:'jack',age:19

                        }
                    }).then(function (res) {
                        console.log(res);
                        console.log(res.data);
                    });
                }




            }

        })


    </script>
</body>

</html>