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> ...
随机推荐
- 关于toString()和valueOf()以及Object.prototype.toString.call()的结合理解
一.先说说String(): String()是全局函数,把对象的值转换为字符串. 语法:String(obj); 任何值(对象)都有String()方法,执行过程是这样的:首先,如果该对象上有toS ...
- [LOJ2736] [JOISC 2016 Day 3] 回转寿司 (分块+堆)
[LOJ2736] [JOISC 2016 Day 3] 回转寿司 (分块+堆) 题面 给出一个有n 个点的环,环上各点有一个初始权值 \(a_i\) 给出 Q 个询问,每次询问给出一个区间 [l,r ...
- 修复线上bug
1,git branch new_branch 2,git push origin new_branch 以上是线上地址操作,以下是本地仓库操作 3,git fetch 4,git checkout ...
- WPF的DataTrigger使用
首先创建一个空的项目 然后看看前台写的代码,如下图所示 <Grid> <StackPanel HorizontalAlignment="Center" Verti ...
- mysql的sql语句优化方法面试题总结
mysql的sql语句优化方法面试题总结 不要写一些没有意义的查询,如需要生成一个空表结构: select col1,col2 into #t from t where 1=0 这类代码不会返回任何结 ...
- FCKEditor报java.lang.NullPointerException
1.需要在 加value=“ ” <FCK:editor instanceName="replycontent" basePath="/fckeditor" ...
- 361-基于6U VPX TMS320C6678+XC7K325T 的信号处理板
基于6U VPX TMS320C6678+XC7K325T 的信号处理板 一.板卡概述 本板卡基于6U VPX结构设计无线电信号处理平台.板卡包含1片C6678芯片,1片 FPGA XC7K325T- ...
- ARM Cortex-M底层技术(2)—启动代码详解
杂谈 工作了一天,脑袋比较乱.一直想把底层的知识写成一个系列,希望可以坚持下去.为什么要写底层的东西呢?首先,工作用到了这部分内容,最近和内部Flash打交道比较多,自然而然会接触到一些底层的东西:第 ...
- Axios跨域实例
//创建axios实例 var instance = axios.create({ baseURL : "http://localhost:8080", withCredentia ...
- 03SQL语句
数据库是不认识JAVA语言的,但是我们同样要与数据库交互,这时需要使用到数据库认识的语言SQL语句,它是数据库的代码. 结构化查询语言(Structured Query Language)简称SQL, ...