這篇文章主要介紹了vue使用ajax請求后臺數(shù)據(jù)的方法，具有一定借鑒價值，需要的朋友可以參考下。下面就和我一起來看看吧。

成都創(chuàng)新互聯(lián)公司是一家專注于網(wǎng)站設計制作、成都網(wǎng)站制作與策劃設計,安義網(wǎng)站建設哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設10多年,網(wǎng)設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:安義等地區(qū)。安義做網(wǎng)站價格咨詢:13518219792

vue本身它是不支持直接發(fā)送ajax請求的，需要用到axios（一個基于promise的HTTP庫，可以用在瀏覽器和node.js中）

第一步：Axios的安裝和引入

1.使用npm安裝：

    $npm install axios -S

2.在vue項目公共文件（我這里是main.js文件）中引入：

    import axios from "axios"；

3.但是呢axios跟很多第三方模塊不同的一點是它不能直接使用use方法，而是用下面這種方法：

    Vue.prototype.$axios = axios;

4.這樣呢在methods里用到的時候直接用this.$axios來調(diào)用它：

this.$axios.get(接口地址).then(function(respon){}).catch(function(error){})

第二步：axios.get

1.通過params選項來傳遞參數(shù)的格式是 axios.get('url',{params:{key:value}}).then() ；

2.本次實例的axios請求后臺數(shù)據(jù)代碼：

//右邊學員動態(tài)
        getbuyer: function () {
          this.$axios.get(this.GLOBAL.host+"/pub/api/v1/web/list_buyer",{
            params:{
              video_id:this.$route.query.video_id
            }
          }).then(res=>{
            var result = res.data;
            if (result.code == 0) {
              this.buyerArr = result.data;
            }
          })
        }

解析：

1）this.GLOBAL.host: 由于一個項目中會有很多次ajax請求，我們可以把域名封裝在一個單獨的模塊中，然后用到的時候直接調(diào)用，操作代碼如下：
    

首先：在main.js全局文件中import我們的封裝模塊global：import Global from'../static/config/global'然后：將上面的Global掛載到Vue.prototype：Vue.prototype.GLOBAL = Global;其次：host是在global.js模塊中封裝的域名：const host = 'http://api.xdclass.net:8081';最后：在每次axios請求的時候，直接 this.GLOBAL.host+"后臺接口地址"這樣就可以了

2）params里面是請求接口時的參數(shù)，可以一個也可以多個，用“，”隔開；

3）我這個參數(shù)寫法 this.$route.query.video_id ，意思是獲取到當前頁面地址欄中url參數(shù)名為video_id的參數(shù)值；

4）.then中就是請求接口成功后要做的事情，res是responce的簡寫，就是成功后后臺給我們返回的對象，數(shù)據(jù)就在這個對象里面；

5）this.buyerArr 是定義在data中的一個空數(shù)組，用來接收后臺返回的數(shù)據(jù)

以上就是vue使用ajax請求后臺數(shù)據(jù)的方法的詳細內(nèi)容了，看完之后是否有所收獲呢？如果想了解更多相關(guān)內(nèi)容，歡迎來創(chuàng)新互聯(lián)行業(yè)資訊！

當前題目：vue使用ajax請求后臺數(shù)據(jù)的方法-創(chuàng)新互聯(lián)
URL鏈接：http://sd-ha.com/article44/jjihe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設計、ChatGPT、電子商務、網(wǎng)站排名、品牌網(wǎng)站設計、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)