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 相关文章推荐
在模板页面的js使用办法
Apr 01 Javascript
jQuery .tmpl(), .template()学习资料小结
Jul 18 Javascript
js 图片随机不定向浮动的实现代码
Jul 02 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
May 11 Javascript
jQuery鼠标事件汇总
Aug 30 Javascript
基于socket.io+express实现多房间聊天
Mar 17 Javascript
AngularJS 简单应用实例
Jul 28 Javascript
vue-router实现嵌套路由的讲解
Jan 19 Javascript
vue-cli项目使用mock数据的方法(借助express)
Apr 15 Javascript
js代码编写无缝轮播图
Sep 13 Javascript
返回上一个url并刷新界面的js代码
Sep 12 Javascript
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 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
第六节--访问属性和方法
2006/11/16 PHP
PHP魔术方法使用方法汇总
2016/02/14 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
2013/04/02 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
2014/01/25 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
2015/09/06 Javascript
JavaScript知识点总结之如何提高性能
2016/01/15 Javascript
Jquery和Js获得元素标签名称的方法总结
2016/10/08 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
vue中使用echarts的示例
2021/01/03 Vue.js
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
使用Python的package机制如何简化utils包设计详解
2017/12/11 Python
答题辅助python代码实现
2018/01/16 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
python中property属性的介绍及其应用详解
2019/08/29 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
css3中仿放大镜效果的几种方式原理解析
2020/12/03 HTML / CSS
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
2014年情人节活动方案
2014/02/16 职场文书
生日寄语大全
2014/04/08 职场文书
厂区绿化方案
2014/05/08 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
三年级学生评语大全
2014/12/26 职场文书
SQL之各种join小结详细讲解
2021/08/04 MySQL
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python