首页 > 代码库 > Vue1.0学习总结(2)———交互(vue-resoucre的使用)

Vue1.0学习总结(2)———交互(vue-resoucre的使用)

2024-09-08 03:38:49   208人阅读

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="http://www.mamicode.com/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="http://www.mamicode.com/js/jquery.min.js"></script>
23                     <script type="text/javascript" src="http://www.mamicode.com/js/bootstrap.min.js"></script>
24                     <script type="text/javascript" src="http://www.mamicode.com/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=http://www.mamicode.com/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>

 

Vue1.0学习总结(2)———交互(vue-resoucre的使用)


联系
我们