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> ...
随机推荐
- 【题解】Oh My Holy FFF
题目大意 有\(n\)个士兵(\(1 \leq n \leq 10^5\)),第\(i\)个士兵的身高为\(h_{i}\),现在要求把士兵按照原来的顺序分成连续的若干组,要求每组的士兵数量不超过\ ...
- 欧拉函数&欧拉定理&降幂 总结
欧拉函数&欧拉定理&降幂 总结 标签:数学方法--数论 阅读体验:https://zybuluo.com/Junlier/note/1300214 这年头不总结一下是真的容易忘,老了老 ...
- Webpack4、iView、Vue开发环境的搭建
导读 项目使用了 yarn ,一个快速.可靠.安全的依赖管理工具.yarn 是一个类似于npm的包管理工具,它是由 facebook 推出并开源,它在速度,离线模式,版本控制的方面具有独到的优势.此项 ...
- 埃及分数问题(带乐观估计函数的迭代加深搜索算法-IDA*)
#10022. 「一本通 1.3 练习 1」埃及分数 [题目描述] 在古埃及,人们使用单位分数的和(形如 $\dfrac{1}{a}$ 的,$a$ 是自然数)表示一切有理数.如:$\dfrac{ ...
- 2019牛客暑期多校训练营(第三场) - J - LRU management - 模拟
https://ac.nowcoder.com/acm/contest/883/J 根据这个数据结构的特点,也就是计算机组成原理里面学过的cache的LRU管理算法,每次访问都会在cache中查询一页 ...
- Arcmap10.7连接oracle,但不装oracle客户端的配置
环境:arcgis 10.7,oracle服务端12cR1.理论上其他版本方法一样 使用情况:一般开发人员不安装oracle服务端,甚至oracle客户端也不装,此时要用arcmap连oracle需要 ...
- char 指针如何判断字符串需要输出长度
先上代码: #include <stdio.h> #include <string.h> ] = "; int func1(const char *ip) { pri ...
- 23、前端知识点--webpack的使用详解
Webpack 是当下最热门的前端资源模块化管理和打包工具. https://www.cnblogs.com/zhangruiqi/p/7656206.html
- spark sql 操作
DSL风格语法 1.查看DataFrame中的内容 scala> df1.show +---+--------+---+ | id| name|age| +---+--------+---+ | ...
- python编程基础之简单购物车
#good文件夹内容[ ['Iphone7', 5800], ['Coffee', 30], ['疙瘩汤', 10], ['Python Book', 99], ['Bike', 199], ['Vi ...