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

成都創(chuàng)新互聯(lián)公司10多年成都企業(yè)網(wǎng)站定制服務(wù);為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì)及高端網(wǎng)站定制服務(wù),成都企業(yè)網(wǎng)站定制及推廣,對(duì)成都三維植被網(wǎng)等多個(gè)行業(yè)擁有豐富的網(wǎng)站營(yíng)銷經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。

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

axios的github倉(cāng)庫(kù)

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

異步請(qǐng)求

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

客戶端

客戶端代碼

代碼解析：

// 服務(wù)端請(qǐng)求地址
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' => '我是在地球上成長(zhǎng)的賽亞人'],
  ];
  
  $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)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)站欄目：vue如何結(jié)合axios與后端進(jìn)行ajax交互-創(chuàng)新互聯(lián)
URL網(wǎng)址：http://weahome.cn/article/eihdi.html