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

來源:互聯網
上載者:User

標籤: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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

Tags Index: