vue如何結(jié)合axios與后端進(jìn)行ajax交互

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

創(chuàng)新互聯(lián)憑借專業(yè)的設(shè)計(jì)團(tuán)隊(duì)扎實(shí)的技術(shù)支持、優(yōu)質(zhì)高效的服務(wù)意識(shí)和豐厚的資源優(yōu)勢(shì)，提供專業(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ì)經(jīng)驗(yàn)，為成都千余家中小型企業(yè)策劃設(shè)計(jì)了網(wǎng)站。

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

axios的github倉庫

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

異步請(qǐng)求

頁面異步發(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ù)端代碼

代碼解析：

<?php
  header("Access-Control-Allow-Origin:*"); // 如果客戶端和服務(wù)端不同域，要加上這行代碼，不然會(huì)報(bào)跨域錯(cuò)誤
  $data = [
    1 => ['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í)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

當(dāng)前標(biāo)題：vue如何結(jié)合axios與后端進(jìn)行ajax交互
鏈接地址：http://bm7419.com/article2/gejsoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、網(wǎng)站導(dǎo)航、動(dòng)態(tài)網(wǎng)站、服務(wù)器托管、企業(yè)建站、

廣告

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