1. 程式人生 > >vue webpack中使用ajax傳輸資料給後臺

vue webpack中使用ajax傳輸資料給後臺

在使用資料傳輸中,大多數採用的都是ajax技術,那麼在vue中怎樣使用ajax技術呢?本篇將帶你入門vue axios中ajax技術。

1、基本配置

   (1)首先在你的vue專案下配置對應的檔案axios

    下載axios元件,最終放置在node_modules\axios\dist中   

      npm install axios -S

   (2)配置main.js中的內容   

      import axios from 'axios'

      Vue.prototype.$ajax = axios

 2、使用方法

    <div class="form_submit">
  <input type="button" value="提交" class="submit" @click="onClick(user,pass)"/>

   </div>

  方法:

     onClick(value1,value2){
     if(value1===''&& value2===''){
     console.log("請輸入使用者名稱和密碼");
     return false;
     }
    this.$ajax({
                    method: 'post',
                    url : "你的url位置",
                    data : {
                        user : this.user,
                        pass : this.pass
                    },
                    success : function(data) {
         var message = $.parseJSON(data);//後臺返回的json資料需要轉為物件
                         vue.selectById=message;//把後臺返回的JSON資料賦給selectById
                    },
                    error : function(){
                        alert("錯誤");
                    }
                });
    console.log("提交成功!");
    return true;

   }

3、注意事項

    介面要與後臺給的保持一致,不然出錯!