zoukankan      html  css  js  c++  java
  • axios的基本

    axios基本使用.html

    <!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>axios基本使用</title>
    </head>
    
    <body>
        <input type="button" value="get请求" class="get">
        <input type="button" value="post请求" class="post">
        <!-- 官网提供的 axios 在线地址 -->
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script>
            /*
                接口1:随机笑话
                请求地址:https://autumnfish.cn/api/joke/list
                请求方法:get
                请求参数:num(笑话条数,数字)
                响应内容:随机笑话
            */
            document.querySelector(".get").onclick = function () {
                axios.get("https://autumnfish.cn/api/joke/list?num=6")
                // axios.get("https://autumnfish.cn/api/joke/list1234?num=6")
                .then(function (response) {
                    console.log(response);
                  },function(err){
                      console.log(err);
                  })
            }
            /*
                 接口2:用户注册
                 请求地址:https://autumnfish.cn/api/user/reg
                 请求方法:post
                 请求参数:username(用户名,字符串)
                 响应内容:注册成功或失败
             */
            document.querySelector(".post").onclick = function () {
                axios.post("https://autumnfish.cn/api/user/reg",{username:"盐焗西兰花"})
                .then(function(response){
                    console.log(response);
                    console.log(this.skill);
                },function (err) {
                    console.log(err);
                  })
              }
    
        </script>
    </body>
    
    </html>
    

    axios+vue.html

    <!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>axios+vue</title>
    </head>
    
    <body>
        <div id="app">
            <input type="button" value="获取笑话" @click="getJoke">
            <p> {{ joke }}</p>
        </div>
        <!-- 官网提供的 axios 在线地址 -->
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <!-- 开发环境版本,包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            /*
                接口:随机获取一条笑话
                请求地址:https://autumnfish.cn/api/joke
                请求方法:get
                请求参数:无
                响应内容:随机笑话
            */
            var app = new Vue({
                el:"#app",
                data:{
                    joke:"很好笑的笑话"
                },
                methods: {
                    getJoke:function(){
                        // console.log(this.joke);
                        var that = this;
                        axios.get("https://autumnfish.cn/api/joke").then(function(response){
                            // console.log(response)
                            console.log(response.data);
                            // console.log(this.joke);
                            that.joke = response.data;
                        },function (err) {  })
                    }
                },
            })
    
        </script>
    </body>
    
    </html>
    
  • 相关阅读:
    微信第三方平台开发之代小程序实现业务
    解决Chrome网页编码显示乱码的问题
    .Net Core 使用 System.Drawing.Common 在CentOS下报错
    CentOS安装nmap端口查看工具
    解决Nginx反向代理不会自动对特殊字符进行编码的问题 如gitblit中的~波浪线
    Centos7最小安装化后安装图形界面
    手把手教您在 Windows Server 2019 上使用 Docker
    windows10下安装docker报错:error during connect
    git删除远程分支
    linux下shell显示git当前分支
  • 原文地址:https://www.cnblogs.com/haima/p/12822488.html
Copyright © 2011-2022 走看看