Vue第十三天（AJAX）

最新推荐文章于 2024-03-31 16:48:15 发布

若叶-知秋

最新推荐文章于 2024-03-31 16:48:15 发布

阅读量102

点赞数

文章标签： vue 自学菜鸟

本文链接：https://blog.csdn.net/qq_31051117/article/details/84028100

版权

准备步骤如同第一天

代码：（测试注意事项：js中的代码依次开启测试，不可全部开启，会报错）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/vue-resource/dist/vue-resource.js"></script>
    <script src="../node_modules/vue-router/dist/vue-router.js"></script>
    <script src="../node_modules/axios/dist/axios.js"></script>
</head>
<body>
<!--GET请求-->
<div id="app1">
    <input type="button" @click="get()" value="点击测试ajax">
</div>
<br>

<!--POST请求-->
<div id="box">
    <input type="button" @click="post()" value="点我异步获取数据(Post)">
</div>
<br>
</body>
<script>
    /*get请求*/
    var vm=new Vue({
        el:'#app1',
        data:{
            msg:'测试'
        },
        methods:{
            get:function () {
            //    发送get请求
                this.$http.get('没写后台，无测试').then(function (res) {
                    document.write(res.body);
                },function () {
                    console.log('请求失败')
                })
            }
        }
    })

    /*post请求*/
    window.onload = function(){
        var vm = new Vue({
            el:'#box',
            data:{
                msg:'Hello World!',
            },
            methods:{
                post:function(){
                    //发送 post 请求
                    this.$http.post('没写后台，无测试',{name:"菜鸟教程",url:"http://www.runoob.com"},{emulateJSON:true}).then(function(res){
                        document.write(res.body);
                    },function(res){
                        console.log(res.status);
                    });
                }
            }
        });
    }
</script>
</html>