Vue_axios的学习，用作Vue前端发送请求

最新推荐文章于 2024-05-21 23:21:19 发布

加菲人10086

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量108

点赞数

分类专栏：前端学习文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/m0_48159893/article/details/122036037

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

Vue_axios的学习
- 1、cdn引入
- 2、代码完整笔记

Vue_axios的学习

1、cdn引入

<script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
两个都需要导入

2、代码完整笔记

<!DOCTYPE html>
<html lang="zh">
<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>Vue axios-网络请求库</title>
    <script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
    <!-- 引入axios网络请求库CDN，平台为unpkg，小众cdn使用平台 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <!-- 引入vue——cdn，这个版本为开发环境版本，包含了帮助命令警告 -->
</head>
<body>
    <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">
    <input type="button" value="get_music_请求" class="get_music">
    <div id="app">
        <input type="button" value="获取一条笑话" class="get_joke" @click="get_joke">
        <h5>{{msg}}</h5>
    </div>
    
    <!-- https://autumnfish.cn/api/joke/list
        这个网站用来进行接口测试，可以随机生成笑话，后面跟上参数可以决定生成笑话的数量，返回的是json格式
        application/json
        https://autumnfish.cn/api/user/reg
        这个网站用来进行post请求测试，不能用来get请求，返回的是字符串格式text/html
        http://k1998.xyz/php/public/index.php/index/music/lists
        这个网站用来进行音乐获取,返回的是json格式


        小型知识点：
        1、谷歌浏览器中的浏览器开发者工具中的network选项卡下的XHR（XMLHttpRequest）
        即通过这个对象发送的请求，也称作ajax请求
        2、通过response对象获取的信息，data如果对应的是数组，那么数组将无法通过 响应.属性 的方式直接取到
        如果是单个信息，可以直接取到
    -->
    <script>
        var myVue = new Vue({
            el:"#app",
            data:{
                msg:"一条笑话"
            },
            methods:{
                get_joke:function(){
                    let _this=this;
                    axios.get("https://autumnfish.cn/api/joke")
                    .then(res => {
                        _this.msg=res.data;
                    })
                    .catch(err => {
                        console.error(err); 
                    })
                }
            }
        });
    </script>
    <script>
        document.querySelector(".get").onclick=function(){
            axios.get("https://autumnfish.cn/api/joke/list?num=5").then(function(response){
                console.log(response.data);
            },function(err){
                console.log(err);
            })

        };

        document.querySelector(".post").onclick=function(){
            axios.post("https://autumnfish.cn/api/user/reg",{"username":"tom1234"}).then(function(response){
                console.log(response);
            },function(err){
                console.log(err);
            })
        };
        document.querySelector(".get_music").onclick=function(){
            axios.get(" http://k1998.xyz/php/public/index.php/index/music/lists").then(function(response){
                for(var obj in response.data){
                    console.log(obj);
                }
            })
        };
        
    </script>
</body>
</html>

加菲人10086

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue_axios的学习，用作Vue前端发送请求

文章目录Vue_axios的学习1、cdn引入2、代码完整笔记Vue_axios的学习1、cdn引入 2、代码完整笔记<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"
复制链接

扫一扫