麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 編程 > JavaScript > 正文

get post jsonp三種數據交互形式實例詳解

2019-11-19 15:40:12
字體:
來源:轉載
供稿:網友

一、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 , 準備基礎樣式代碼

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

  2、編寫js代碼

 <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不請求數據   if(ev.keyCode==13){                        //如果事件為回車    window.open('https://www.baidu.com/s?wd='+this.t1); //則打開百度對應t1值頁面    this.t1='';                          //清空輸入框   }   this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{    wd:this.t1                           //截取的搜索接口,發送數據為輸入框此時輸入的數據   },{    jsonp:'cb'                          //callback名字,默認為'callback'   }).then(function(res){    this.myData=res.data.s                    //將數據的s值賦給 myData   },function(res){    alert(res.status)   })   },   changeDown:function(){                       //按下鍵時的函數   this.now++;                            //now下標值++   if(this.now==this.myData.length)this.now=-1;        //如果下標值為數據長度,即最后一個時,為-1,跳到第一個   this.t1=this.myData[this.now]                 //輸入框值為此時數據中選中的值   },   changeUp:function(){                        //按上鍵時的函數   this.now--;                            //now下標值--   if(this.now==-2)this.now=this.myData.length-1       //如果下標值為-2,此時now=總長度-1,跳到最后一個   this.t1=this.myData[this.now]                 //輸入框值為此時數據中選中的值    }  }  }) } </script>

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

總結

以上所述是小編給大家介紹的三種數據交互形式get  post jsonp實例詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持!

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 国产1区在线观看 | 国产精品久久久久久久久久电影 | 成人三级免费电影 | 国产影院一区 | 国产精品一区二区羞羞答答 | 成人三区四区 | 久久精精品 | 国内精品久久久久久久久久 | 日韩黄网站 | 一区二区精品视频 | 双性精h调教灌尿打屁股的文案 | 一本色道久久久888 国产一国产精品一级毛片 国产精品高潮视频 | 91久久极品少妇韩国 | 毛片一区二区三区四区 | 黄色av免费网站 | 黄色大片在线免费观看 | 五月天影院,久久综合, | 欧美成人高清视频 | 87成人免费看片 | 看免费黄色一级片 | 欧美日韩爱爱视频 | 激情亚洲一区二区 | 亚洲欧美日韩精品久久 | 夜间福利视频 | 成年人高清视频在线观看 | a视频在线免费观看 | 国产美女爽到喷白浆的 | 国产成人精品免高潮在线观看 | 免费国产在线视频 | 国产一级片91 | 国产成人高清成人av片在线看 | 一级黄片毛片免费看 | 在线看一区二区三区 | 亚洲小视频在线 | 日本欧美一区二区三区视频麻豆 | 欧美成年视频 | 免费网站看毛片 | 免费一级片网站 | 一级毛片电影院 | 国产亚洲精品久久久久婷婷瑜伽 | 亚洲国产精品久久久久 |