WEB前端：vuejs全家桶（13）：使用vue-resource发送跨域请求、-优快云博客

本文详细介绍了如何在Vue项目中使用vue-resource库进行跨域请求，包括安装配置、基本用法及具体示例，如向360和百度发送JSONP请求，并展示了如何通过按键事件动态更新搜索建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、使用vue-resource发送跨域请求

 3. 使用vue-resource发送跨域请求

#### 3.1 安装vue-resource并引入    
    cnpm install vue-resource -S

#### 3.2 基本用法
    使用this.$http发送请求  
        this.$http.get(url, [options])
        this.$http.head(url, [options])
        this.$http.delete(url, [options])
        this.$http.jsonp(url, [options])
        this.$http.post(url, [body], [options])
        this.$http.put(url, [body], [options])
        this.$http.patch(url, [body], [options])

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>发送AJAX请求</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/vue-resource.min.js"></script>
    <script>
        window.onload = function() {
            new Vue({
                el: '.itany',

                methods: {
                    sendJSONP() {
                        // https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=a&mid=39eb374b0188c5751f764b18ef0b1c2d&huid=11fp%2FaKxqRa3l5krn%2BPtcN3a5RI2eZGOr%2BhodoRcv9nkA%3D&llbq=A5%2CB5%2CC5%2CD5
                        this.$http.jsonp('https://sug.so.360.cn/suggest', {
                            params: {
                                word: 'a'
                            }
                        }).then(resp => {
                            console.log(resp.data.s);
                        });
                    },
                    sendJSONP2() {

                        this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
                            params: {
                                wd: 'a'
                            },
                            jsonp: 'cb' //百度使用的jsonp参数名为cb，所以需要修改
                        }).then(resp => {
                            console.log(resp.data.s);
                        });
                    }
                },


            });
        }
    </script>

</head>

<body>
    <div class="itany">
        <button @click="sendJSONP">向360搜索发送JSONP请求</button>
        <button @click="sendJSONP2">向百度搜索发送JSONP请求</button>
    </div>
</body>

</html>

2、练习


    搜索列表
    课后作业：
        1.只显示4条
        2.回车后在新页面中显示搜索结果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>发送AJAX请求</title>
	<style>
		.current{
			background-color:#ccc;
		}
	</style>
	<script src="js/vue.js"></script>
	<script src="js/vue-resource.min.js"></script>
	<script>
		window.onload=function(){
			new Vue({
				el:'#itany',
				data:{
					keyword:'',
					myData:[],
					now:-1 //当前选中项的索引
				},
				methods:{
					getData(e){
						//如果按方向键上、下，则不发请求
						if(e.keyCode==38||e.keyCode==40) 
							return;

						this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
							params:{
								wd:this.keyword
							},
							jsonp:'cb'
						}).then(resp => {
							this.myData=resp.data.s;
						});
					},
					changeDown(){
						this.now++;
						this.keyword=this.myData[this.now];
						if(this.now==this.myData.length){
							this.now=-1;
						}
					},
					changeUp(){
						this.now--;
						this.keyword=this.myData[this.now];
						if(this.now==-2){
							this.now=this.myData.length-1;
						}
					}
				}
			});
		}
	</script>
</head>
<body>
	<div id="itany">
		<input type="text" v-model="keyword" @keyup="getData($event)" @keydown.down="changeDown" @keydown.up.prevent="changeUp">
		<ul>
			<li v-for="(value,index) in myData" :class="{current:index==now}">
				{{value}}
			</li>
		</ul>
		<p v-show="myData.length==0">暂无数据....</p>
	</div>
</body>
</html>