苏飞论坛

标题: vue.js原生的ajax请求 [打印本页]

作者: 站长苏飞 时间: 2018-12-26 16:18
标题: vue.js原生的ajax请求
Vue 要实现异步加载需要使用到 vue-resource 库
这个大家直接引用就行了

[HTML] 纯文本查看 复制代码

<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

Get 请求

以下是一个简单的 Get 请求实例，请求地址是一个简单的 txt 文本：

[JavaScript] 纯文本查看 复制代码

window.onload = function(){

    var vm = new Vue({

        el:'#box',

        data:{

            msg:'Hello World!',

        },

        methods:{

            get:function(){

                //发送get请求

                this.$http.get('/try/ajax/ajax_info.txt').then(function(res){

                    document.write(res.body);    

                },function(){

                    console.log('请求失败处理');

                });

            }

        }

    });

}

如果需要传递数据，可以使用 this.$http.get('get.php',jsonData) 格式，第二个参数 jsonData 就是传到后端的数据。

[JavaScript] 纯文本查看 复制代码

this.$http.get('get.php',{a:1,b:2}).then(function(res){

    document.write(res.body);    

},function(res){

    console.log(res.status);

});

post 请求

post 发送数据到后端，需要第三个参数 {emulateJSON:true}。

emulateJSON 的作用：如果Web服务器无法处理编码为 application/json 的请求，你可以启用 emulateJSON 选项

[JavaScript] 纯文本查看 复制代码

window.onload = function(){

    var vm = new Vue({

        el:'#box',

        data:{

            msg:'Hello World!',

        },

        methods:{

            post:function(){

                //发送 post 请求

                this.$http.post('/try/ajax/demo_test_post.php',{name:"菜鸟教程",url:"http://www.runoob.com"},{emulateJSON:true}).then(function(res){

                    document.write(res.body);    

                },function(res){

                    console.log(res.status);

                });

            }

        }

    });

}

作者: 竹林风 时间: 2018-12-26 16:32
我只是路过打酱油的。

作者: liu 时间: 2018-12-26 17:23
感恩无私的分享与奉献

作者: Amy 时间: 2018-12-27 09:39
强烈支持楼主ing……

作者: 惜 时间: 2018-12-30 15:47
强烈支持楼主ing……

欢迎光临苏飞论坛 (http://www.sufeinet.com/)