三種資料互動形式：get post jsonp

標籤：vue.js   eth   alt   for   成功   cli   source   log   顏色   

一、get請求

1.引入 vue.js 和 vue-resource.js , 準備一個按鈕

<input type="button" value="按鈕" @click="get()"/>     //點擊按鈕請求資料函數get()

2.準備一個txt檔案

welcome vue

3.編寫js代碼

<script>    window.onload=function(){      new Vue({        el:‘body‘,                      //主體為body，有套div時，此處為選取器        methods:{          get:function(){            this.$http.get(‘a.txt‘).then(function(res){              alert(res.data)　　　　　　　//成功後，彈出請求資料            },function(res){                                                 alert(res.status)　　　　　　//失敗後，彈出請求狀態代碼            })          }        }      })    }  </script>

二、post請求

1.引入 vue.js 和 vue-resource.js , 準備一個按鈕

<input type="button" value="按鈕" @click="get()"/>

2.準備一個php檔案

<?php  $a=$_POST[‘a‘];  $b=$_POST[‘b‘];  echo $a-$b;　　　　　　　　　　//回顯資料相減結果?>

3.編寫js代碼

<script>    window.onload=function(){      new Vue({        el:‘body‘,        methods:{          get:function(){            this.$http.post(‘post.php‘,{        //發送實參資料，進行運算（需要放在伺服器環境）              a:1,              b:2            },{              emulateJSON:true                //post的標識            }).then(function(res){              alert(res.data)　　　　　　　　　　//成功後彈出資料結果            },function(res){　　　　              alert(res.status)　　　　　　　　　//失敗後彈出狀態代碼            })          }        }      })    }  </script>

三、jsonp——百度下拉式清單執行個體

1.引入 vue.js 和 vue-resource.js , 準備基礎樣式代碼

 1 <style> 2     .gray{ 3       background: #ccc;              //按上下鍵時顯示的文字背景顏色 4     } 5   </style> 6  7 <div id="box"> 8     <input type="text" v-model="t1" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()"/>
　　　　　　　　//按鍵傳索引值 get($event) 函數   //按向下鍵時 changeDown() 函數   //按向上鍵時 changeUp() 函數：阻止預設行為輸入浮上移 9     <ul>10       <li v-for="value in myData" :class="{gray:$index==now}">{{value}}</li>
　　　　　　　　//迴圈myData資料  綁定樣式同時添加條件,下標值此時為幾時，背景為灰11     </ul>12     <p v-show="myData.length==0">暫無資料...</p>    //當資料長度為0時，顯示暫無資料...13   </div>

2、編寫js代碼

 1 <script> 2     window.onload=function(){ 3       new Vue({ 4         el:‘#box‘, 5         data:{ 6           myData:[], 7           t1:‘‘, 8           now:-1 9         },10         methods:{11           get:function(ev){                               　　　　　　　//接收事件12             if(ev.keyCode==38||ev.keyCode==40)return;　　　　　　　　　　//如果事件為向上向下則return不請求資料13             if(ev.keyCode==13){　　　　　　　　　　　　　　　　 　　　　　　　//如果事件為斷行符號14               window.open(‘https://www.baidu.com/s?wd=‘+this.t1);    //則開啟百度對應t1值頁面15               this.t1=‘‘;   　　　　　　　　　　　　　　　　　　　　　　　　　//清空輸入框16             }17             this.$http.jsonp(‘https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su‘,{18               wd:this.t1   　　　　　　　　　　　　　　　　　　　　　　　　　　//截取的搜尋介面，發送資料為輸入框此時輸入的資料19             },{20               jsonp:‘cb‘    　　　　　　　　　　　　　　　　　　　　　　　　　//callback名字，預設為‘callback‘21             }).then(function(res){22               this.myData=res.data.s　　　　　　　　　　　　　　　　　　　　//將資料的s值賦給 myData23             },function(res){24               alert(res.status)25             })26           },27           changeDown:function(){ 　　　　　　　　　　　　　　　　　　　　　　//按下鍵時的函數28             this.now++;　　　　　　　　　　　　　　　　　　　　　　　　　　　　//now下標值++29             if(this.now==this.myData.length)this.now=-1;　　　　　　　　//如果下標值為資料長度，即最後一個時，為-1，跳到第一個30             this.t1=this.myData[this.now]　　　　　　　　　　　　　　　　　//輸入框值為此時資料中選中的值31           },32           changeUp:function(){ 　　　　　　　　　　　　　　　　　　　　　　　//按上鍵時的函數33             this.now--;　　　　　　　　　　　　　　　　　　　　　　　　　　　　//now下標值--34             if(this.now==-2)this.now=this.myData.length-1　　　　　　　//如果下標值為-2，此時now=總長度-1，跳到最後一個35             this.t1=this.myData[this.now]　　　　　　　　　　　　　　　　　//輸入框值為此時資料中選中的值　36           }37         }38       })39     }40   </script>

3、類似百度搜尋了。。。

三種資料互動形式：get post jsonp