首頁 > web前端 > js教程 > 主體

在VUE中如何使用Vue-resource完成交互

不言
發布: 2018-06-29 15:01:33
原創
3227 人瀏覽過

本篇文章主要介紹了VUE中使用Vue-resource完成交互,內容挺不錯的,現在分享給大家,也給大家做個參考。

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

使用vue-resource

##引入vue-resource

vue-resource就像jQuery裡的$.ajax,是用來跟後端互動資料的,vue-resource是vue的插件,所以我們在開始使用vue之前,需要先介紹vue-resource.js這個檔案

<script src=&#39;js/vue.js&#39;></script>
<script src=&#39;js/vue-resource.js&#39;></script>
登入後複製

基本語法

// 基于全局Vue对象使用http
Vue.http.get(&#39;/someUrl&#39;, [options]).then(successCallback, errorCallback);
Vue.http.post(&#39;/someUrl&#39;, [body], [options]).then(successCallback, errorCallback);


// 在一个Vue实例内使用$http
this.$http.get(&#39;/someUrl&#39;, [options]).then(successCallback, errorCallback);
this.$http.post(&#39;/someUrl&#39;, [body], [options]).then(successCallback, errorCallback);
登入後複製

在發送請求後,使用then方法來處理回應結果,then方法有兩個參數,第一個參數是回應成功時的回呼函數,第二個參數是回應失敗時的回呼函數。

options物件

實例:

GET請求

在下面的實例中,我們做一個求和的功能,效果如下圖:

get方法:

this.$http.get(&#39;/someUrl&#39;, [options]).then(function(response){  
  // 响应成功回调
}, function(response){  
  // 响应错误回调
});
登入後複製

在這個實例中,我們準備了一個php文件,該文件主要接收前台透過get傳過來的參數,並計算兩個參數的和,程式碼如下:

<?php
  $a=$_GET[&#39;a&#39;];
  $b=$_GET[&#39;b&#39;];
  echo $a+$b;
?>
登入後複製

html程式碼:

<p 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()"/>
</p>
登入後複製

#

<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>
登入後複製

說明:response是後台傳回的參數,它包含以下屬性:

 POST請求

#

<?php
  $a=$_POST[&#39;a&#39;];
  $b=$_POST[&#39;b&#39;];
  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请求需要将emulateJSON设置为true
          }).then(function(response){
            alert(response.data)
          },function(response){
            alert(response.status)
          }
          )
        }
      }
    })
登入後複製

JSONP

jsonp的語法跟get,post差不多,只是傳遞的資料不一樣。接下來,我們用jsonp來完成一個百度搜尋的功能。

1.首先準備一個實例的接口,這個接口是百度的搜尋接口(我們可以自己找一些接口作為測試),如下:

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

2.準備佈局

    <p class="container" id="box" style="margin-top:100px">
      <input type="text" placeholder="请输入搜索内容" />
      <ul>
        <li >22222</li>
      </ul>
      <p >暂无数据...</p>
    </p>
登入後複製

##

<input type="text" placeholder="请输入搜索内容" v-model="t1" />
登入後複製

##
data:{
  myData:[],
  t1:""
}
登入後複製

##

<input type="text" placeholder="请输入搜索内容" v-model="t1" @keyup="search()"/>
登入後複製

##
     methods:{
        search:function(ev){this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{
            "wd":this.t1
          },{
            jsonp:"cb" //callback名字,默认是callback
          }).then(function(response){
            this.myData=response.data.s
          },function(response){
            alert(response.status)
          }
          )
          }
        }
登入後複製

##

    <p 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">暂无数据...</p>
    </p>
登入後複製

##

/*data数据*/
      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];
        }
登入後複製

##


  
    
    初识vue
    
    
  
  
    <p 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">暂无数据...</p>
    </p>
  
  
  
  
  
  
登入後複製

##rrreee


##.功能描述

當我們在搜尋框中輸入搜尋的內容的時候,下面的清單會顯示出根據我們輸入的內容聯想的詞語。按鍵盤的上下鍵,可以上下選擇列表中的詞語,按enter鍵的時候,會執行搜尋
4.代碼實現

首先我們準備一個myData數組,存放聯想的詞語。 t1是input框輸入的值,如下

rrreee

#######rrreee#########在搜尋框中的輸入內容的時候,執行一個方法,這個方法主要用於發送一個請求,獲取輸入內容的聯想詞語。 #########rrreee############rrreee##########執行到這一步,清單中已經可以顯示出我們搜尋的聯想詞語了,如下圖:###############下面的我們可以實現,按上下鍵的時候,選擇字詞 #########rrreee######## ####rrreee#########完整程式碼:#########rrreee#########以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網! ######相關推薦:#########vue 實作剪裁圖片並上傳伺服器的功能介紹###############Vue 實作雙向綁定的方法###########################

以上是在VUE中如何使用Vue-resource完成交互的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板