Min's blog

I choose to see the beauties in the world.

导航

vue交互

Posted on 2017-07-07 09:45  Min77  阅读(140)  评论(0)  编辑  收藏  举报

ajax：

获取普通文本数据

this.$http.get('a.txt').then(function (res) {
    alert(res.data);
},function (res) {
    alert(res.status);
})

给服务器发送get数据--OK
this.$http.get('get.php',{
    params:{  必须有params
        a:1,
        b:2
    }
},{emulateJSON:true}).then(function (res) {
    alert(res.data);
},function (res) {
    alert(res.status);
})


给服务器发送post数据-OK
   this.$http.post('post.php',{ 
        a:3,
        b:2
},{
        emulateJSON:true
    }).then(function (res) {
        alert(res.data);
    },function (res) {
        alert(res.status);
    })
jsonp跨域-OK
    this.$http.jsonp('https://sug.so.360.cn/suggest',{
        params:{
            word:'a'
        }
},{
        emulateJSON:true
    }).then(function (res) {
        alert(res.data.s);
    },function (res) {
        alert(res.status);
    })
 跨域,更改callback
  this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
        params:{
            wd:'a'
        },
        jsonp:'cb'  默认为callback
}).then(function (res) {
        alert(res.data.s);
    },function (res) {
        alert(res.status);
    })
 简易百度搜索：
    <script>
        window.onload=function () {
         new Vue({
                el:'#box',
                data:{
                    myData:[],
                    t1:''
                },
             methods:{
                get:function () {
                    this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
                        params:{
                            wd:this.t1
                        },
                        jsonp:'cb'
                }).then(function (res) {
                    this.myData=res.data.s;
                    },function (res) {
                        alert(res.status);
                    })
                }
             }
            });

        };
    </script>
</head>
<body>
    <div id="box">
        <input type="text" v-model="t1" @keyup="get()">
        <ul>
            <li v-for="(value,index) in myData">{{value}}</li>
        </ul>
        <p v-show="myData.length==0">暂无数据</p>
    </div>
</body>
</html>