Vue的异步请求

Vue的异步请求–get

new Vue({
    el :'#app',
    data:{
        obj:null
    },
    created:function(){
    this.getlist()  //可以调用自身的方法
    }
    methods:{
        getdata:function(){
            // 1.0 请求的url
            var url = 'http://vueapi.ittun.com/api/getprodlist'

            // 2.0 利用 vue-resource发出ajax的get请求
            this.$http.get(url)  //发出请求
            .then(function(response){
                this.obj = response.body;

            }) // 获取服务器响应回来的数据
        }
    }
});
</script>

Vue的异步请求–post

new Vue({
    el :'#app',
    methods:{
        postdata:function(){
            // 将数据通过vue-resource的post方法提交给http://vueapi.ittun.com/api/addproduct
             var url = 'http://vueapi.ittun.com/api/addproduct';

             // 2.0 调用 $http.post(url,传入到服务器的请求报文体的数据,{emulateJSON:true})方法
             this.$http.post(url,{name:'奔驰'},{emulateJSON:true})
             .then(function(response){
                alert(response.body.message);
             });
        }
    }
})
</script>

Vue的异步请求–jsonp

<script>
new Vue({
    el:'#app',
    data:{
        obj :null
    },
    methods:{
        getjsonp:function(){
            // 利用vue-resource中的jsonp方法实现跨域请求数据，这里注意的是
            // url后面不需要跟callback=fn这个参数了，jsonp方法会自动加上
            this.$http.jsonp('http://vueapi.ittun.com/api/jsonp')
            .then(function(response){
                // 将服务器中的数据获取赋值给obj
                this.obj = response.body;
            })
        }
    }

});
</script>