Vue自学笔记（二）跟的b站黑马快速入门vue

最新推荐文章于 2024-08-28 16:49:19 发布

凌爷的手指

最新推荐文章于 2024-08-28 16:49:19 发布

阅读量136

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_42391380/article/details/113068064

版权

该博客演示了如何在网页中使用axios库进行GET和POST请求。通过点击按钮，实现了从'https://autumnfish.cn/api/joke/list'获取笑话列表的GET请求，以及向'https://autumnfish.cn/api/user/reg'发送用户名为'盐焗虾'的POST注册请求。响应内容会在浏览器控制台显示。

摘要由CSDN通过智能技术生成

在这里插入图片描述
axios请求的github源码地址

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <!-- axios.get(地址?查询字符串).then(function(response){},function(err){} )
    axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){}) -->
    <!--key=value&key2=value2-->
    <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">
<!--尝试用axios的get请求获取笑话，post请求登录-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        document.querySelector(".get").onclick = function(){
            axios.get("https://autumnfish.cn/api/joke/list?num=3")
            .then(function(response){
                console.log(response);
            },function(err){
                coonsole.log(err);
            }
            
            ) 
        }
        document.querySelector(".post").onclick=function(){
            axios.post("https://autumnfish.cn/api/user/reg",
           {username:"盐焗虾"} )
           .then(function(response){
               console.log(response);
           },function(err){
               console.log(err);
           })
        }
       
    </script>
</body>
</html>

完成后在网页控制台可以看见相关内容