這篇文章給大家分享的是有關(guān)vue如何結(jié)合axios與后端進(jìn)行ajax交互的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)憑借專業(yè)的設(shè)計團(tuán)隊(duì)扎實(shí)的技術(shù)支持、優(yōu)質(zhì)高效的服務(wù)意識和豐厚的資源優(yōu)勢，提供專業(yè)的網(wǎng)站策劃、成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站優(yōu)化、軟件開發(fā)、網(wǎng)站改版等服務(wù)，在成都10余年的網(wǎng)站建設(shè)設(shè)計經(jīng)驗(yàn)，為成都千余家中小型企業(yè)策劃設(shè)計了網(wǎng)站。

以前vue官方推薦的ajax庫是vue-resource, 現(xiàn)在改為axios

axios的github倉庫

實(shí)現(xiàn)的效果：

異步請求

頁面異步發(fā)出get請求獲取數(shù)據(jù)，提交表單異步post數(shù)據(jù)到服務(wù)端

客戶端

客戶端代碼

代碼解析：

// 服務(wù)端請求地址
let url = 'http://local.php.com/index.php';
let vm = new Vue({
  el: "#app",
  data: {
    list: [],
    name: '',
    saying: '',
  },
  methods: {
    add() {
      // 傳送的數(shù)據(jù)為json格式
      let data = JSON.stringify({
        name: this.name,
        saying: this.saying
      });
      axios.post(url, data)
      .then(function (response) {
        // console.log(response);
        // 獲取服務(wù)端返回的數(shù)據(jù)
        vm.$data.list = response.data;
      })
      .catch(function (error) {
        console.log(error);
      });
    }
  }
});
axios.get(url, {})
  .then(function (response) {
    vm.$data.list = response.data;
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });

服務(wù)端

使用php作為服務(wù)端程序

服務(wù)端代碼

代碼解析：

 ['name' => '孫悟空', 'saying' => '我是在地球上成長的賽亞人'],
  ];
  
  $post = file_get_contents("php://input"); // 不要用$_POST接收數(shù)據(jù)
  if ($post) {
    $data[] = json_decode($post, true);
  }
  echo json_encode($data, true);

感謝各位的閱讀！關(guān)于“vue如何結(jié)合axios與后端進(jìn)行ajax交互”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！