vue结合axios与后端进行ajax交互的方法


Posted in Javascript onJuly 06, 2018

以前vue官方推荐的ajax库是vue-resource, 现在改为axios

axios的github仓库

实现的效果:

vue结合axios与后端进行ajax交互的方法

异步请求

页面异步发出get请求获取数据,提交表单异步post数据到服务端

客户端

客户端代码

代码解析:

// 服务端请求地址
let url = 'http://local.php.com/index.php';
let vm = new Vue({
  el: "#app",
  data: {
    list: [],
    name: '',
    saying: '',
  },
  methods: {
    add() {
      // 传送的数据为json格式
      let data = JSON.stringify({
        name: this.name,
        saying: this.saying
      });
      axios.post(url, data)
      .then(function (response) {
        // console.log(response);
        // 获取服务端返回的数据
        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
  });

服务端

使用php作为服务端程序

服务端代码

代码解析:

<?php
  header("Access-Control-Allow-Origin:*"); // 如果客户端和服务端不同域,要加上这行代码,不然会报跨域错误
  $data = [
    1 => ['name' => '孙悟空', 'saying' => '我是在地球上成长的赛亚人'],
  ];
  
  $post = file_get_contents("php://input"); // 不要用$_POST接收数据
  if ($post) {
    $data[] = json_decode($post, true);
  }
  echo json_encode($data, true);

vue结合axios与后端进行ajax交互的方法

异步请求.gif

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
新浪刚打开页面出来的全屏广告代码
Apr 02 Javascript
JavaScript开发时的五个注意事项
Dec 08 Javascript
js中的this关键字详解
Sep 25 Javascript
javascript 获取网页标题代码实例
Jan 22 Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 Javascript
jquery datatable服务端分页
Aug 31 Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 Javascript
Vue+abp微信扫码登录的实现代码示例
Jan 06 Javascript
深入了解JavaScript词法作用域
Jul 29 Javascript
基于vue hash模式微信分享#号的解决
Sep 07 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
Dec 28 Javascript
Vue实现圆环进度条的示例
Feb 06 Vue.js
jQuery实现仿京东防抖动菜单效果示例
Jul 06 #jQuery
vue.js动画中的js钩子函数的实现
Jul 06 #Javascript
老生常谈JS中的继承及实现代码
Jul 06 #Javascript
vue.js使用v-if实现显示与隐藏功能示例
Jul 06 #Javascript
vue.js计算属性computed用法实例分析
Jul 06 #Javascript
vue.js实现的绑定class操作示例
Jul 06 #Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 #Javascript
You might like
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
php中fsockopen用法实例
2015/01/05 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
IIS 7.5 asp Session超时时间设置方法
2017/04/17 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
PHP PDOStatement::getAttribute讲解
2019/02/01 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
JQueryEasyUI Layout布局框架的使用
2013/04/08 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
jQuery实现鼠标经过图片预览大图效果
2014/04/10 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
jquery.ajax之beforeSend方法使用介绍
2014/12/08 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
2016/06/20 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
2019/10/10 jQuery
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
python实现简单ftp客户端的方法
2015/06/28 Python
Python中is和==的区别详解
2018/11/15 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
解决Tensorboard可视化错误:不显示数据 No scalar data was found
2020/02/15 Python
python+Selenium自动化测试——输入,点击操作
2020/03/06 Python
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
艺术爱好者的自我评价分享
2013/10/08 职场文书
园林设计师自荐信
2013/11/18 职场文书
信息技术培训感言
2014/03/06 职场文书
小学语文教研活动总结
2014/07/01 职场文书
工伤事故证明
2014/10/20 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
城南旧事读书笔记
2015/06/29 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书