vue中的ajax

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:*');

给TA买糖
共{{data.count}}人
人已赞赏
vue

TypeError错误

2018-6-4 11:07:25

vue

data变化视图渲染

2018-6-5 11:02:27

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索