vue-resource

[Narutocc]

使用vue进行ajax请求的几种写法：

第一种：原生js写法逻辑代码如下：

逻辑代码如下：

<script>
    new Vue({
        el:'#demo',
        data:{
            name:''
        },
        methods:{
            // 原生js请求
            ajax:function(){
                var self = this;
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function(){
                    if(xmlhttp.readyState === 4 && xmlhttp.status === 200){
                        var data = JSON.parse(xmlhttp.responseText);
                        console.log(data);
                        console.log(this);//this指向的是XMLHttpRequest,所以前面需要用self来保存this 
                        self.name = data.name;
                    }
                }
                xmlhttp.open('GET','test.php',true);
                xmlhttp.send();
            }
        },
        ready:function(){
            this.ajax()
        }
    })
</script>

视图层：

<div id="demo">
    <!-- test.json的值就渲染到页面上 -->
    <p>{{name}}</p>
</div>

php文件代码：

<?php
    echo json_encode(array("name"=>"naruto"));
?>

第二种：使用jq，引入zepto 引入zepto:<script src="js/zepto.js"></script>

<script>
    new Vue({
        el:'#demo',
        data:{
            name:''
        },
        methods:{
            // 使用jq方法，引入zepto   
            getData:function(){
                var self = this;

                // jq第一种写法
                $.ajax({
                    type:'GET',
                    url:'test.php',
                    success:function(data){
                        var data = JSON.parse(data)
                        console.log(data);
                        self.name = data.name;
                    }
                })

                // jq第二种写法
                $.get('test.php',function(data){
                    var data = JSON.parse(data)
                    console.log(data);
                    self.name = data.name
                })
            }
        },
        ready:function(){
            this.getData();
        }
    })
</script>

第三种：使用vue-resource插件 引入vue-resource插件：<script src="js/vue-resource.js"></script>

<script>
    new Vue({
        el:'#demo',
        data:{
            name:''
        },
        methods:{
            getData:function(){     
            // 使用vue-resource插件，引入插件，注意语法
            getDataa:function(){
                console.log(this);//Vue
                this.$http.get('test.php').then(function(data){
                    console.log(data);
                    this.name = data.data.name;//因为this已经指向了Vue，所以此处不需要用self存放
                },function(err){
                    console.log(err)
                })
            }
        },
        ready:function(){
            this.getDataa();
        }
    })
</script>