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 相关文章推荐
Firefox outerHTML实现代码
Jun 04 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
javascript 二进制运算技巧解析
Nov 27 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
Nov 20 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
node.js读取文件到字符串的方法
Jun 29 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
JavaScript File API文件上传预览
Feb 02 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 Javascript
mpvue+vant app搭建微信小程序的方法步骤
Feb 11 Javascript
js如何获取访问IP、地区、当前操作浏览器
Jul 23 Javascript
layui多iframe页面控制定时器运行的方法
Sep 05 Javascript
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
ThinkPHP使用Ueditor的方法详解
2016/05/20 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
PHP实现简单登录界面
2019/10/23 PHP
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
Javascript 圆角div的实现代码
2009/10/15 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
jquery实现简单易懂的图片展示小例子
2013/11/21 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
2015/03/04 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
JavaScript面向对象精要(上部)
2017/09/12 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
[00:06]Yes,it worked!小卡尔成功穿越时空加入战场!
2019/07/20 DOTA
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
详解Python中最难理解的点-装饰器
2017/04/03 Python
python中urlparse模块介绍与使用示例
2017/11/19 Python
django drf框架自带的路由及最简化的视图
2019/09/10 Python
pytorch中使用cuda扩展的实现示例
2020/02/12 Python
Python多线程获取返回值代码实例
2020/02/17 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
市场安全管理制度
2014/01/26 职场文书
大学应届生的自我评价
2014/03/06 职场文书
党员批评与自我批评范文
2014/09/23 职场文书
银行培训心得体会范文
2016/01/09 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书
详解如何用Python实现感知器算法
2021/06/18 Python