get  post jsonp三種數(shù)據(jù)交互形式實(shí)例詳解

<input type="button" value="按鈕" @click="get()"/>  //點(diǎn)擊按鈕請求數(shù)據(jù)函數(shù)get()

welcome vue

<script>
 window.onload=function(){
  new Vue({
  el:'body',      //主體為body，有套div時(shí)，此處為選擇器
  methods:{
   get:function(){
   this.$http.get('a.txt').then(function(res){
    alert(res.data)　　　　　　　//成功后，彈出請求數(shù)據(jù)
   },function(res){         
    alert(res.status)　　　　　　//失敗后，彈出請求狀態(tài)碼
   })
   }
  }
  })
 }
 </script>

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

<?php
 $a=$_POST['a'];
 $b=$_POST['b'];
 echo $a-$b;　　　　　　　　　　//回顯數(shù)據(jù)相減結(jié)果
?>

<script>
 window.onload=function(){
  new Vue({
  el:'body',
  methods:{
   get:function(){
   this.$http.post('post.php',{  //發(fā)送實(shí)參數(shù)據(jù)，進(jìn)行運(yùn)算（需要放在服務(wù)器環(huán)境）
    a:1,
    b:2
   },{
    emulateJSON:true    //post的標(biāo)識
   }).then(function(res){
    alert(res.data)　　　　　　　　　　//成功后彈出數(shù)據(jù)結(jié)果
   },function(res){　　　　
    alert(res.status)　　　　　　　　　//失敗后彈出狀態(tài)碼
   })
   }
  }
  })
 }
 </script>

<style>
 .gray{
  background: #ccc;    //按上下鍵時(shí)顯示的文字背景顏色
 }
 </style>
<div id="box">
 <input type="text" v-model="t1" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()"/>
　　　　　　　　//按鍵傳鍵值 get($event) 函數(shù) //按向下鍵時(shí) changeDown() 函數(shù) //按向上鍵時(shí) changeUp() 函數(shù)：阻止默認(rèn)行為輸入浮上移
 <ul>
  <li v-for="value in myData" :class="{gray:$index==now}">{{value}}</li>
　　　　　　　　//循環(huán)myData數(shù)據(jù) 綁定樣式同時(shí)添加條件,下標(biāo)值此時(shí)為幾時(shí)，背景為灰
 </ul>
 <p v-show="myData.length==0">暫無數(shù)據(jù)...</p> //當(dāng)數(shù)據(jù)長度為0時(shí)，顯示暫無數(shù)據(jù)...
 </div>

 <script>
 window.onload=function(){
  new Vue({
  el:'#box',
  data:{
   myData:[],
   t1:'',
   now:-1
  },
  methods:{
   get:function(ev){        　　　　　　　//接收事件
   if(ev.keyCode==38||ev.keyCode==40)return;　　　　　　　　　　//如果事件為向上向下則return不請求數(shù)據(jù)
   if(ev.keyCode==13){　　　　　　　　　　　　　　　　 　　　　　　　//如果事件為回車
    window.open('https://www.baidu.com/s?wd='+this.t1); //則打開百度對應(yīng)t1值頁面
    this.t1=''; 　　　　　　　　　　　　　　　　　　　　　　　　　//清空輸入框
   }
   this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
    wd:this.t1 　　　　　　　　　　　　　　　　　　　　　　　　　　//截取的搜索接口，發(fā)送數(shù)據(jù)為輸入框此時(shí)輸入的數(shù)據(jù)
   },{
    jsonp:'cb' 　　　　　　　　　　　　　　　　　　　　　　　　　//callback名字，默認(rèn)為'callback'
   }).then(function(res){
    this.myData=res.data.s　　　　　　　　　　　　　　　　　　　　//將數(shù)據(jù)的s值賦給 myData
   },function(res){
    alert(res.status)
   })
   },
   changeDown:function(){ 　　　　　　　　　　　　　　　　　　　　　　//按下鍵時(shí)的函數(shù)
   this.now++;　　　　　　　　　　　　　　　　　　　　　　　　　　　　//now下標(biāo)值++
   if(this.now==this.myData.length)this.now=-1;　　　　　　　　//如果下標(biāo)值為數(shù)據(jù)長度，即最后一個(gè)時(shí)，為-1，跳到第一個(gè)
   this.t1=this.myData[this.now]　　　　　　　　　　　　　　　　　//輸入框值為此時(shí)數(shù)據(jù)中選中的值
   },
   changeUp:function(){ 　　　　　　　　　　　　　　　　　　　　　　　//按上鍵時(shí)的函數(shù)
   this.now--;　　　　　　　　　　　　　　　　　　　　　　　　　　　　//now下標(biāo)值--
   if(this.now==-2)this.now=this.myData.length-1　　　　　　　//如果下標(biāo)值為-2，此時(shí)now=總長度-1，跳到最后一個(gè)
   this.t1=this.myData[this.now]　　　　　　　　　　　　　　　　　//輸入框值為此時(shí)數(shù)據(jù)中選中的值　
   }
  }
  })
 }
 </script>