vue1.0的交互：
angular：$http (ajax对象)
vue想做交互：必须引入另一个库vue-resoucre(vue本身不支持交互)
方法：在没有使用vue-cli的时候要放在服务区环境下，如放入php的环境中
格式：
this.$http.get(‘/someUrl‘, [data], [options]).then(successCallback, errorCallback);
this.$http.post(‘/someUrl‘, [data], [options]).then(successCallback, errorCallback);
this.$http.get方式:
1）获取一个普通的文本数据：
methods:{
get:function(){
this.$http.get(‘shuju.txt‘).then(function(res){
console.log(res.data);
},function(res){
console.log(res.data);
});
}
}
2）给服务器发送数据(平时用的是最多的)
get.php中的代码:
<?php
$a=$_GET[‘a‘];
$b=$_GET[‘b‘];
echo $a+$b;
?>
Vue实例中的代码：
get:function(){
this.$http.get(‘data/get.php‘,{
a:1,
b:20
}).then(function(res){
console.log(res.data);
},function(res){
console.log(res.data);
});
}
this.$http.post方式:(推荐使用post方法)
post.php中的代码:
<?php
$a=$_POST[‘a‘];
$b=$_POST[‘b‘];
echo $a+$b;
?>
Vue实例中的代码：
methods:{
get:function(){
this.$http.post(‘data/post.php‘,{
a:1,
b:20
},{
emulateJSON:true
}).then(function(res){
console.log(res.data);
},function(res){
console.log(res.data);
});
}
}
3) jsonp的方式:
获取接口1：https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow
get:function(){
this.$http.jsonp(‘https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su‘,{
wd:‘a‘
},{
jsonp:‘cb‘ //callback的名字,默认名字为callback
}).then(function(res){
console.log(res.data.s);
},function(res){
console.log(res.data);
});
}
获取接口2：https://sug.so.360.cn/suggest?callback=suggest_so&word=a
get:function(){
this.$http.jsonp(‘https://sug.so.360.cn/suggest‘,{
wd:‘a‘
}).then(function(res){
alert(res.data.s)
console.log(res.data.s);
},function(res){
console.log(res.data);
});
}
回车接口：https://www.baidu.com/s?wd=
回车打开：window.open(‘https://www.baidu.com/s?wd=‘+this.t1);
jsonp接口应用示例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <link rel="stylesheet" href="css/bootstrap.min.css">
7 </head>
8 <body>
9 <div class="container" style="margin-top: 80px;">
10 <div class="form-group searchdown">
11 <label for="downlists">下拉框：</label>
12 <input type="text" id="" class="form-control" v-model="t1" @keyup="get($event)" @keydown.down="changedown()" @keydown.up.prevent="changeup()">
13 <ul class="list-group">
14 <li v-for="value in myData" :class="{grey:$index==now}" class="list-group-item">
15 {{value}}
16 </li>
17 </ul>
18 <p v-show="myData.length==0">暂无数据........</p>
19 </div>
20 </div>
21
22 <script type="text/javascript" src="js/jquery.min.js"></script>
23 <script type="text/javascript" src="js/bootstrap.min.js"></script>
24 <script type="text/javascript" src="js/vue-resource.js"></script>
25 <script type="text/javascript">
26 window.onload=function(){
27 new Vue({
28 el:‘body‘,
29 data:{
30 myData:[],
31 t1:‘‘,
32 now:-1,
33 success:[],
34 lost:[],
35 },
36 methods:{
37 get:function(ev){
38 if (ev.keyCode==38 || ev.keyCode==40) {
39 return;//return不继续执行下面的函数
40 }
41 if (ev.keyCode==13) {
42 window.open(‘https://www.baidu.com/s?wd=‘+this.t1);
43 this.t1=‘‘;
44 }
45 this.$http.jsonp(‘https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su‘,{
46 wd:this.t1
47 },{
48 jsonp:‘cb‘
49 }).then(function(res){
50 this.myData=res.data.s;
51 },function(){
52 console.log(res.data);
53 });
54 },
55 changedown:function(){
56 this.now++;
57 if (this.now==this.myData.length) {
58 this.now=-1;
59 }
60 this.t1=this.myData[this.now];
61 },
62 changeup:function(){
63 this.now--;
64 if (this.now==-2) {
65 this.now=this.myData.length-1;
66 }
67 this.t1=this.myData[this.now];
68 }
69 }
70 });
71 };
72 </script>
73 </body>
74 </html>