获取后台数据使用JQ-AJAX 和 Vue-Axios 两种方式的使用对比

版权声明:版权是个什么玩意儿?看得上随便转 https://blog.csdn.net/Byte_Dance/article/details/82946032
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>

    <div id="app">
        <button id="getData">JQ-AJAX获取数据</button>
        <button @click="getAxios">Vue获取数据</button>
    </div>

    <script>
        new Vue({

            el:"#app",
            methods:{

                //使用Vue中的axios获取数据
                getAxios:function(){
                    axios.get('http://jsonplaceholder.typicode.com/users', {
                        params: {
                            ID: 12345
                        }
                    })
                        .then(function (response) {
                            console.log("Vue获取的数据");
                            console.log(response.data);
                        })
                        .catch(function (error) {
                            console.log(error);
                        })
                }
            }
        })

        //使用
        // $("#getData").click(function(){      //ES6之前写法
        $("#getData").click( () =>{             //ES6写法
            $.get("http://jsonplaceholder.typicode.com/users",function(src){
                console.log("JQ-AJAX获取的数据")
                console.log(src)
            })
        })
    </script>
</body>
</html>

在Vue cli 中使用axios

猜你喜欢

转载自blog.csdn.net/Byte_Dance/article/details/82946032