老雷PHP全栈开发教程之必备插件axios

老雷PHP全栈开发

发布于 2020-07-02 12:10:42

4450

发布于 2020-07-02 12:10:42

文章被收录于专栏：老雷PHP全栈开发老雷PHP全栈开发

本节课程我们主要学习axios的使用，axios主要的功能就是实现ajax功能，他是一个简单的ajax库。

内容

我们经常使用jquery来实现ajax。但是我们现在用上vue了，jquery显得太笨重了。

我们只需要它的ajax功能，所以我们找来axios替换。

vue+axios

axios在ie浏览器是支持不是很好。

我们通常在移动端使用它。

https://github.com/axios/axios

get

  axios({
    url: 'data.json',
    data: {
      firstName: 'Fred',
      lastName: 'Flintstone'
    }
  })
  .then(function(res) {
    console.log(res.data.data.title);
  })
  .catch(function(error) {
    console.log(error);
  })
  .finally(function() {


  });

post

  axios({
    method: 'post',
    url: '/school_php/api.php',
    data: {
      firstName: 'Fred',
      lastName: 'Flintstone'
    },
    headers: {
      'content-type': 'application/x-www-form-urlencoded'
    },
  })
  .then(function(res) {
    console.log(res.data);
  })
  .catch(function(error) {
    console.log(error);
  });

文件上传

  function upload(){
    console.log("wia")
    var file=document.getElementById("upfile");
    var upfile=file.files[0]
    var form=new FormData();
    form.append("upfile",upfile,upfile.name);
    form.append("title","文件上传");
    axios({
      method: 'post',
      url: 'upload.php',
      data: form,
      headers: {
        'Content-Type': 'multipart/form-data'
      },
    })
    .then(function(res) {
      document.getElementById("res").src=res.data.filename;
    })
  }

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2019-08-14，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript