vue实现ajax请求(vue-resource和axios)
1、vue-resouce实现ajax请求
vue1中主要用vue-resouce实现ajax请求,
2.1 引用vue-resouce
引入axios,直接在index.html文件中引入;

或者在main.js文件中引入vue-resouce.js,并use vue-resouce;

2.1 使用vue-resouce
三种ajax请求的方式

2、axios实现ajax请求
2.1 引用axios
vue2.0版本已不推荐使用vue-resouce发送ajax请求,推荐使用axios发送请求;
一:直接在index中引入vue.js和axios.js文件,
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
或者在main.js文件中导入axios,import axios from ‘axios’,将axios设置在vue中的原型中Vue.prototype.axios = axios;
2.2 使用axios
在组件中需要发送ajax请求的地方(后一种方法引入的axios改为this.axios):
axios.type(url, params).then(function(res){
成功回调
}).catch(function(res){
失败回调
});
或者:
axios({
method: type,
url: '',
data: {}
}).then(function(res){
成功回调
}).catch(function(res){
失败回调
});
axios不支持跨域请求,如果要进行跨域请求,那么使用vue-resouce获取jquery发送ajax请求。
注: axios是一个基于Promise的HTTP请求;关于Promise示例:

vue实现ajax请求(vue-resource和axios)的更多相关文章
- 从零开始学 Web 之 Vue.js(四)Vue的Ajax请求和跨域
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- Vue处理ajax请求
Ajax请求 1>解决跨域问题 1.1前端解决.只需要在vue.config.js中增加devServer节点增加代理: const path = require("path" ...
- vue 发送ajax请求
一. 简介 1.vue本身不支持发送AJAX请求,需要使用vue-resource(vue1.0版本).axios(vue2.0版本)等插件实现 2.axios是一个基于Promise的HTTP请求客 ...
- vue发送ajax请求
一.vue-resource 1.简介 一款vue插件,用于处理ajax请求,vue1.x时广泛应用,现不被维护. 2.使用流程 step1:安装 [命令行输入] npm install vue-re ...
- vue中ajax请求发送
示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...
- vue的ajax请求之axios
axios.get(this.apiUrl+'good/info',{params:{'goodsid':'sp441153'}}) .then(function(response){ console ...
- Vue(七)发送Ajax请求
发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue ...
- Vue的Ajax(vue-resource/axios)
一 简介 1.vue本身不支持发送AJAX请求,需要使用vue-resource(vue1.0版本).axios(vue2.0版本)等插件实现 2.axios是一个基于Promise的HTTP请求客户 ...
- vue实现ajax滚动下拉加载,同时具有loading效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- Dev Express之ImageComboBoxEdit,RepositoryItemImageComboBox使用方式
Dev Express之ImageComboBoxEdit,RepositoryItemImageComboBox使用方式 1.使用ImageComboBoxEdit实现下拉框键值数据函数 publ ...
- vue项目中使用高德地图(根据坐标定位点)
前言 项目中需要根据坐标定位,将自己的实现过程写下来,废话不多说,上代码 正文 <script> var map,marker; export default { data(){ retu ...
- js中JSON和JSONP的区别,让你从懵逼到恍然大悟
说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服 ...
- C# ASP.NET发送电子邮件System.Net.Mail
1.补充知识 (1)POP3和SMTP服务器是什么? 简单点来说:POP3 用于接收电子邮件 ,SMTP 用于发送电子邮件. (1)POP3具体指什么? POP3(Post Office Protoc ...
- ASE Backend Alpha Sprint Review
[Backend] Alpha Review展示博客 团队成员介绍:仅限于Alpha阶段有贡献的成员. 典型场景描述:描述并说明你们认为的产品面向的典型场景. 团队管理与协作:包括但不限于团队内部如何 ...
- Python Paramiko模块使用
1 执行远程命令 #!/usr/bin/python import paramiko ssh = paramiko.SSHClient() ssh.set_missing_host_key_polic ...
- 团队中的 Git 实践
转载自:https://segmentfault.com/a/1190000004963641 本文首发于欧雷流.由于我会时不时对文章进行补充.修正和润色,为了保证所看到的是最新版本,请阅读原文. 在 ...
- 了解Greenplum(1)
了解系列废话: 数据管理系统实现,以Greenplum作为课后实验,这里将实验报告贴出来,纯粹灌水. 1.Greenplum架构 如上图所示,GP的基本结构是单master,多slave节点,客户端连 ...
- LightOJ 1289 LCM from 1 to n(位图标记+素数筛
https://vjudge.net/contest/324284#problem/B 数学水题,其实就是想写下位图..和状压很像 题意:给n让求lcm(1,2,3,...,n),n<=1e8 ...
- luogu4061 大吉大利,晚上吃鸡!
链接 最短路径\(dag\),一道好题. 题目大意:求一张图中满足下列要求的点对\((i,j)\)数量: 所有最短路径必定会经过 \(i\) 点和 \(j\) 点中的任意一点. 不存在一条最短路同时经 ...