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 相关文章推荐
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 Javascript
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
May 30 Javascript
微信小程序 progress组件详解及实例代码
Oct 25 Javascript
微信小程序学习之数据处理详解
Jul 05 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 Javascript
vue.js或js实现中文A-Z排序的方法
Mar 08 Javascript
Vuex中的State使用介绍
Jan 19 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 Javascript
node koa2 ssr项目搭建的方法步骤
Dec 11 Javascript
关于Javascript闭包与应用的详解
Apr 22 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
分页详解 从此分页无忧(PHP+mysql)
2007/11/23 PHP
深入分析php中接口与抽象类的区别
2013/06/08 PHP
php Imagick获取图片RGB颜色值
2014/07/28 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
laravel 判断查询数据库返回值的例子
2019/10/11 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
2010/11/28 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
javascript 应用小技巧方法汇总
2015/07/05 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
JavaScript入门系列之知识点总结
2016/03/24 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
JavaScript实现与web通信的方法详解
2020/08/07 Javascript
浅谈Python中数据解析
2015/05/05 Python
Python实现识别图片内容的方法分析
2018/07/11 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
python 自动批量打开网页的示例
2019/02/21 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
阿迪达斯丹麦官网:adidas丹麦
2016/10/01 全球购物
Java语言程序设计测试题选择题部分
2014/04/03 面试题
十八届三中全会感言
2014/03/10 职场文书
高三上学期学习自我评价
2014/04/23 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书
JavaScript组合继承详解
2021/11/07 Javascript
Win11显卡控制面板打开显卡设置方法
2022/04/20 数码科技