vue-resource发送jsonp跨域请求

vue-resource发送jsonp跨域请求

axios不支持发送跨域的请求，需要用vue-resource插件来完成

使用this.$http发送请求

$this.$http.get(url,[options])

$this.$http.post(url,[options])

$this.$http.jsonp(url,[body],[options])

$this.$http.head(url,[options])

$this.$http.delete(url,[options])

$this.$http.put(url,[body],[options])

$this.$http.patch(url,[body],[options])

语法：

this.$http.jsonp("url",{
    params:{
        data:"需要发送的数据"
    }
}).then(function(data){
    console.log(data)
})

案例：向360搜索发送jsonp请求，模仿360搜索，通过上下箭头控制搜索值

<style>
    .index{background: #f0f0f0;}
</style>

<div class='box'>
    <div>搜索：<input type="text" v-model="msgData" @keyup="send($event)"  @keyup.down.prevent="down()"  @keyup.up.prevent="up()"></div>
    <div>
        <ul>
            <li v-for='(v,index) in arr' :class="{index:index==num}">{{v}}</li>
        </ul>
    </div>
</div>

<script src='/static/vendor/vue/vue.min.js'></script>
<script src='/static/vendor/vue/vue-resource.min.js'></script>
<script>
    var app = new Vue({
        el: '.box',
        data: {
            msgData:'',//获取需要搜索的关键字
            arr:[],//用来装搜索结果
            num:-1,//用来定位数组的位置
            str:''//用来存储关键字
        },
        methods: {
            send(e){
                // 如果键码为箭头上下左右，不触发ajax
                if(e.keyCode==38||e.keyCode==40|| e.keyCode ==39|| e.keyCode ==37){return;}
                //向360搜索发送跨域请求
                this.$http.jsonp("https://sug.so.360.cn/suggest",{
                    params:{
                        word:this.msgData//发送关键字搜索
                    }
                }).then(data=>{
                    this.arr = data.body.s;//将搜索的结果装到数组，用v-for循环输出
                })
                this.str = this.msgData;//将关键字用变量存起来
            },
            up(){
                this.num--;//控制数组位置
                this.msgData = this.arr[this.num];//将数组指定的位置放到input输入域
                
                if (this.num == -1) {
                    this.msgData = this.str;//将搜索的关键字放入input输入域
                    this.num = 10;//初始化位置为10
                }
            },
            down(){
                this.num++;//控制数组位置
                this.msgData = this.arr[this.num];;//将数组指定的位置放到input输入域
                if(this.num == this.arr.length){
                    this.msgData = this.str;//将搜索的关键字放入input输入域
                    this.num = -1;//初始化位置为-1
                }
            }

        }
    })
</script>

上一篇：vue过滤器

下一篇：vue生命周期