VUE中使用Vue-resource完成交互

更新時(shí)間：2017年07月21日 11:00:41 作者：小之

本篇文章主要介紹了VUE中使用Vue-resource完成交互，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

本文介紹了VUE中使用Vue-resource完成交互，分享給大家，具體如下

使用vue-resource

引入vue-resource

vue-resource就像jQuery里的$.ajax，是用來(lái)跟后端交互數(shù)據(jù)的，vue-resource是vue的一個(gè)插件，所以我們?cè)陂_(kāi)始使用vue之前，需要先引入vue-resource.js這個(gè)文件

<script src='js/vue.js'></script>
<script src='js/vue-resource.js'></script>

基本語(yǔ)法

// 基于全局Vue對(duì)象使用http
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);


// 在一個(gè)Vue實(shí)例內(nèi)使用$http
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

在發(fā)送請(qǐng)求后，使用then方法來(lái)處理響應(yīng)結(jié)果，then方法有兩個(gè)參數(shù)，第一個(gè)參數(shù)是響應(yīng)成功時(shí)的回調(diào)函數(shù)，第二個(gè)參數(shù)是響應(yīng)失敗時(shí)的回調(diào)函數(shù)。

options對(duì)象

實(shí)例：

GET請(qǐng)求

在下面的實(shí)例中，我們做一個(gè)求和的功能,效果如下圖：

get方法：

this.$http.get('/someUrl', [options]).then(function(response){  
  // 響應(yīng)成功回調(diào)
}, function(response){  
  // 響應(yīng)錯(cuò)誤回調(diào)
});

在該實(shí)例中，我們準(zhǔn)備了一個(gè)php文件，該文件主要接收前臺(tái)通過(guò)get傳過(guò)來(lái)的參數(shù)，并計(jì)算兩個(gè)參數(shù)的和，代碼如下：

<?php
  $a=$_GET['a'];
  $b=$_GET['b'];
  echo $a+$b;
?>

html代碼：

<div class="container" id="box" style="margin-top:100px">
  <input type="text" name="" id="" v-model="a" />+
  <input type="text" name="" id="" v-model="b" />
  =
  <input type="button" value="求和" class="btn btn-info" @click="add()"/>
</div>

<script type="text/javascript">
  new Vue({
    el:"#box",
    data:{
      a:"",
      b:""
    },
    methods:{
      add:function(){
        this.$http.get("get.php",{
          "a":this.a,
          "b":this.b
        }).then(function(response){
          alert(response.data)
        },function(response){
          alert(response.status)
        }
        )
      }
    }
  })
</script>

說(shuō)明：response是后臺(tái)返回的參數(shù)，它包括以下屬性：

POST請(qǐng)求

<?php
  $a=$_POST['a'];
  $b=$_POST['b'];
  echo $a+$b;
?>

    new Vue({
      el:"#box",
      data:{
        a:"",
        b:""
      },
      methods:{
        add:function(){
          this.$http.post("post.php",{
            "a":this.a,
            "b":this.b
          },{
            emulateJSON:true //POST請(qǐng)求需要將emulateJSON設(shè)置為true
          }).then(function(response){
            alert(response.data)
          },function(response){
            alert(response.status)
          }
          )
        }
      }
    })

JSONP

jsonp的語(yǔ)法跟get，post差不多，只是傳遞的數(shù)據(jù)不一樣。接下來(lái)，我們用jsonp來(lái)完成一個(gè)百度搜索的功能。

1.首先準(zhǔn)備一個(gè)實(shí)例的接口，這個(gè)接口是百度的搜索接口（我們可以自己找一些接口作為測(cè)試）,如下：

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=show

2.準(zhǔn)備布局

    <div class="container" id="box" style="margin-top:100px">
      <input type="text" placeholder="請(qǐng)輸入搜索內(nèi)容" />
      <ul>
        <li >22222</li>
      </ul>
      <p >暫無(wú)數(shù)據(jù)...</p>
    </div>

3.功能描述

當(dāng)我們?cè)谒阉骺蛑休斎胨阉鞯膬?nèi)容的時(shí)候，下面的列表會(huì)顯示出根據(jù)我們輸入的內(nèi)容聯(lián)想的詞語(yǔ)。按鍵盤的上下鍵，可以上下選擇列表中的詞語(yǔ)，按enter鍵的時(shí)候，會(huì)執(zhí)行搜索

4.代碼實(shí)現(xiàn)

首先我們準(zhǔn)備一個(gè)myData數(shù)組，存放聯(lián)想的詞語(yǔ)。t1是input框輸入的值，如下

<input type="text" placeholder="請(qǐng)輸入搜索內(nèi)容" v-model="t1" />

data:{
  myData:[],
  t1:""
}

在搜索框中的輸入內(nèi)容的時(shí)候，執(zhí)行一個(gè)方法，這個(gè)方法主要用于發(fā)送一個(gè)請(qǐng)求，獲取輸入內(nèi)容的聯(lián)想詞語(yǔ)。

<input type="text" placeholder="請(qǐng)輸入搜索內(nèi)容" v-model="t1" @keyup="search()"/>

     methods:{
        search:function(ev){this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{
            "wd":this.t1
          },{
            jsonp:"cb" //callback名字，默認(rèn)是callback
          }).then(function(response){
            this.myData=response.data.s
          },function(response){
            alert(response.status)
          }
          )
　　　　　　　　　　}
        }

執(zhí)行到這一步，列表中已經(jīng)可以顯示出我們搜索的聯(lián)想詞語(yǔ)了，如下圖：

下面的我們可以實(shí)現(xiàn)，按上下鍵的時(shí)候，選擇詞語(yǔ)

    <div class="container" id="box" style="margin-top:100px">
      <input type="text" v-model="t1" @keyup="search($event)" @keydown.down.prevent="changeDown($event)" @keydown.up.prevent="changeup()"/>
      <ul>
        <li v-for="(value, index) in myData" :class="{gray:index==now}">{{value}}</li>
      </ul>
      <p v-show="myData.length==0">暫無(wú)數(shù)據(jù)...</p>
    </div>

/*data數(shù)據(jù)*/
      data:{
        myData:[],
        t1:"",
        now:-1
      }
/*上下鍵的方法*/
        changeDown:function(){
            this.now++;
            if(this.now==this.myData.length){
              this.now=-1;
            }
            this.t1=this.myData[this.now];
        },
        changeup:function(){
            this.now--;
            if(this.now==-2){
              this.now=this.myData.length-1;
            }
            this.t1=this.myData[this.now];
        }

完整代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>初識(shí)vue</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" />
    <style type="text/css">
      .gray{
        background-color: gray;
      }
    </style>
  </head>
  <body>
    <div class="container" id="box" style="margin-top:100px">
      <input type="text" v-model="t1" @keyup="search($event)" @keydown.down.prevent="changeDown($event)" @keydown.up.prevent="changeup()"/>
      <ul>
        <li v-for="(value, index) in myData" :class="{gray:index==now}">{{value}}</li>
      </ul>
      <p v-show="myData.length==0">暫無(wú)數(shù)據(jù)...</p>
    </div>
  </body>
  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/vue-resource.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    //
    new Vue({
      el:"#box",
      data:{
        myData:[],
        t1:"",
        now:-1
      },
      methods:{
        search:function(ev){
        if(ev.keyCode==38 || ev.keyCode==40)return;
        if(ev.keyCode==13){
          window.open('https://www.baidu.com/s?wd='+this.t1);
          this.t1='';
        }          
          this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{
            "wd":this.t1
          },{
            jsonp:"cb" //callback名字，默認(rèn)是callback
          }).then(function(response){
            this.myData=response.data.s
          },function(response){
            alert(response.status)
          }
          )
        },
        changeDown:function(){
            this.now++;
            if(this.now==this.myData.length){
              this.now=-1;
            }
            this.t1=this.myData[this.now];
        },
        changeup:function(){
            this.now--;
            if(this.now==-2){
              this.now=this.myData.length-1;
            }
            this.t1=this.myData[this.now];
        }        
      }
    })
  </script>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: