vue中的ajax 2018-06-05 10:22:30

vue中的ajax

需要用到模块:axios

首先,下载axios

npm install axios -D 或者--save-dev(本地安装)

随后在vue相应的组件下引入:

import axios from 'axios'

在data中定义一个空变量

data () {
    return {
      recommendList: ''
    }
  },

封一个函数

methods: {
    getAjax (json) {
      axios.get(json.url, json.string).then(function (res) {
        json.success(res)
      }).catch(function (error) {
        json.error(error)
      })
    }
  }

调用

 mounted () {
    let _this = this
    this.getAjax({
      'url': 'http://127.0.0.3/bookshelf_header/index.php',
      'success': function (res) {
        if (res.data.data.static === 1) {
          _this.recommendList = res.data.data.list
        }
      }
    })
  }

上面代码里,为何要先将this给储存一下?因为在ajax里,this指的不再是vue对象本身,因此需要先把vue对象本身给存起来。 

注: 如果本地写测试,并且是配合PHP的话,会涉及到跨域,因此加上文档头即可,如下:

header('Access-Control-Allow-Origin:*');
  1. Laravel5.7
  2. 微信相关
  3. Mysql
  4. 前端开发
  5. 随记
  6. 写作素材
  7. 开发工具
  8. 互联网