vue 发送ajax请求
一、 简介
1、vue本身不支持发送AJAX请求，需要使用vue-resource（vue1.0版本）、axios（vue2.0版本）等插件实现
2、axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新和维护
3、参考：GitHub上搜索axios，查看API文档
二、 使用axios发送AJAX请求
1、安装axios并引入
1、npm install axios -S #直接下载axios组件，下载完毕后axios.js就存放在node_modules\axios\dist中
2、网上直接下载axios.min.js文件
3、通过script src的方式进行文件的引入
2、发送get请求
1、基本使用格式
格式1：axios([options]) #这种格式直接将所有数据写在options里，options其实是个字典
格式2：axios.get(url[,options]);
2、传参方式：
通过url传参
通过params选项传参
3、案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>发送AJAX请求</title>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#itany',
data:{
user:{
name:'alice',
age:19
},
},
methods:{
send(){
axios({
method:'get',
url:'http://www.baidu.com?name=tom&age=23'
}).then(function(resp){
console.log(resp.data);
}).catch(resp => {
console.log('请求失败：'+resp.status+','+resp.statusText);
});
},
sendGet(){
axios.get('server.php',{
params:{
name:'alice',
age:19
}
})
.then(resp => {
console.log(resp.data);
}).catch(err => { //
console.log('请求失败：'+err.status+','+err.statusText);
});
},
}
});
}
</script>
</head>
<body>
<div id="itany">
<button @click="send">发送AJAX请求</button> <button @click="sendGet">GET方式发送AJAX请求</button> </div>
</body>
</html>
3、发送post请求（push,delete的非get方式的请求都一样）
1、基本使用格式
格式：axios.post(url,data,[options]);
2、传参方式
1、自己拼接为键值对
2、使用transformRequest，在请求发送前将请求数据进行转换
3、如果使用模块化开发，可以使用qs模块进行转换
4、注释：axios默认发送post数据时，数据格式是Request Payload，并非我们常用的Form Data格式，所以参数必须要以键值对形式传递，不能以json形式传参
3、案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>发送AJAX请求</title>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#itany',
data:{
user:{
name:'alice',
age:19
},
},
methods:{
sendPost(){
// axios.post('server.php',{
// name:'alice',
// age:19
// }) //该方式发送数据是一个Request Payload的数据格式，一般的数据格式是Form Data格式，所有发送不出去数据
// axios.post('server.php','name=alice&age=20&') //方式1通过字符串的方式发送数据
axios.post('server.php',this.user,{ //方式2通过transformRequest方法发送数据，本质还是将数据拼接成字符串
transformRequest:[
function(data){
let params='';
for(let index in data){
params+=index+'='+data[index]+'&';
}
return params;
}
]
})
.then(resp => {
console.log(resp.data);
}).catch(err => {
console.log('请求失败：'+err.status+','+err.statusText);
});
},
}
});
}
</script>
</head>
<body>
<div id="itany">
<button @click="send">发送AJAX请求</button> <button @click="sendGet">GET方式发送AJAX请求</button> </div>
</body>
</html>
4、发送跨域请求
1、须知：axios本身并不支持发送跨域的请求，没有提供相应的API，作者也暂没计划在axios添加支持发送跨域请求，所以只能使用第三方库
2、使用vue-resource发送跨域请求
3、 安装vue-resource并引入
npm info vue-resource #查看vue-resource 版本信息
cnpm install vue-resource -S #等同于cnpm install vue-resource -save
4、 基本使用方法（使用this.$http发送请求）
this.$http.get(url, [options])
this.$http.head(url, [options])
this.$http.delete(url, [options])
this.$http.jsonp(url, [options])
this.$http.post(url, [body], [options])
this.$http.put(url, [body], [options])
this.$http.patch(url, [body], [options])
5、案例
基本发送方式1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>发送AJAX请求</title>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script src="js/vue-resource.js"></script>
</head> <body>
<div id="itany">
<a>{{name}}</a> <button v-on:click="send">sendJSONP</button> </div>
</body>
<script>
new Vue({
el: '#itany',
data:{
name: 'alice',
age: 19
},
methods:{
send:function(){
// https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=a
this.$http.jsonp('https://sug.so.360.cn/suggest',
{params:{
word:'a'
}}
).then(function (resp) {
console.log(resp.data)
}) }
}
})
</script>
</html>
基本发送方式2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>发送AJAX请求</title>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script src="js/vue-resource.js"></script>
</head> <body>
<div id="itany">
<a>{{name}}</a> <button v-on:click="send">sendJSONP</button> </div>
</body>
<script>
new Vue({
el: '#itany',
data:{
name: 'alice',
age: 19
},
methods:{
send:function(){
// https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=a
this.$http.jsonp('https://sug.so.360.cn/suggest',
{params:{
word:'a'
}}
).then(resp=> {
console.log(resp.data)
}) }
}
})
</script>
</html>
带jsonp参数方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>发送AJAX请求</title>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script src="js/vue-resource.js"></script>
</head>
<body>
<div id="itany">
<button v-on:click="send">向百度搜索发送JSONP请求</button>
</div>
</body>
<script>
new Vue({
el:'#itany',
data:{
name:'za'
},
methods:{
send:function () {
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
{params:{wd:'a'},
jsonp:'cb', //百度使用的jsonp参数名为cb，所以需要修改,默认使用的是callbakc参数就不用修改
}).then(function (resp) {
console.log(resp.data)
}).catch(function (err) {
console.log(err)
})
}
} })
</script>
</html>
vue 发送ajax请求的更多相关文章
- vue发送ajax请求
一.vue-resource 1.简介 一款vue插件,用于处理ajax请求,vue1.x时广泛应用,现不被维护. 2.使用流程 step1:安装 [命令行输入] npm install vue-re ...
- 从零开始学 Web 之 Vue.js（四）Vue的Ajax请求和跨域
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- Vue（七）发送Ajax请求
发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue ...
- Vue中使用axios发送ajax请求
作为前后端交互的重要技巧--发送ajax请求,在Vue中我们使用axio来完成这一需求: 首先是下载axios的依赖, npm install --save axios vue-axios 然后在ma ...
- vue发送ajx请求 axios
一. 简介 1.vue本身不支持发送AJAX请求,需要使用vue-resource(vue1.0版本).axios(vue2.0版本)等插件实现 2.axios是一个基于Promise的HTTP请求客 ...
- Vuejs发送Ajax请求
一.概况 ①vuejs中没有内置任何ajax请求方法 ②在vue1.0版本,使用的插件 vue resource 来发送请求,支持promise ③在vue2.0版本,使用社区的一个第三方库 axio ...
- vue实现ajax请求（vue-resource和axios）
1.vue-resouce实现ajax请求 vue1中主要用vue-resouce实现ajax请求, 2.1 引用vue-resouce 引入axios,直接在index.html文件中引入; 或者在 ...
- 在发送ajax请求时加时间戳或者随机数去除js缓存
在发送ajax请求的时候,为了保证每次的都与服务器交互,就要传递一个参数每次都不一样,这里就用了时间戳 大家在系统开发中都可能会在js中用到ajax或者dwr,因为IE的缓存,使得我们在填入相同的值的 ...
- 原生js发送ajax请求
堕落了一阵子了,今天打开博客,发现连登录的用户名和密码都不记得了.2016年已过半,不能再这么晃荡下去了. 参加了网易微专业-前端攻城狮 培训,目前进行到大作业开发阶段,感觉举步维艰.但是无论如何,不 ...
随机推荐
- OpenERP实施记录（14）：收款处理
本文是<OpenERP实施记录>系列文章的一部分. 1. 在前面的文章中,销售订单确认时自动生成了客户发票,可以在 会计 > 客户 > 客户发票 查询,状态为"草稿& ...
- pytest文档8-html报告报错截图+失败重跑
前言 做web自动化的小伙伴应该都希望在html报告中展示失败后的截图,提升报告的档次,pytest-html也可以生成带截图的报告. conftest.py 1.失败截图可以写到conftest.p ...
- 解决sqoop报错：SQLServerException: 将字符串转换为 uniqueidentifier 时失败。
报错栈: Error: java.io.IOException: Cannection handler cannot recover failure: at org.apache.sqoop.mapr ...
- 常见C++内存池技术
原文:http://www.cppblog.com/weiym/archive/2013/04/08/199238.html 总结下常见的C++内存池,以备以后查询.应该说没有一个内存池适合所有的情况 ...
- SDUT2013级測试赛_D
题目描写叙述 给出一棵含有n个点的树.每一个点权值为wi.求从根节点到叶子结点权值和最大的那条路经的权值和是多少. 输入 n(1<= n && n <= 10000). 接 ...
- STL中关联式容器的特性
1.map 代码如下: /* * map_1.cpp * * Created on: 2013年8月6日 * Author: Administrator */ #include <iostrea ...
- python 安装whl文件
对于安装whl格式的文件,首先要安装wheel包 利用 pip install wheel或下载再安装: 下载地址: https://pypi.python.org/pypi/wheel 解压后安装: ...
- Qt正则表达式提取数据
这几天在上嵌入式课程设计,需要用到Qt,这个是信号与槽的,寒假的时候也简单学习了一些,但是没有怎么深入,又回过来看了看Qt,发现Qt的ui界面配置与Android的好像,当然Qt也可以拿来开发Andr ...
- 杭电 HDU 1031 Design T-Shirt
Design T-Shirt Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) T ...
- Hadoop，MapReduce,HDFS面试题
今天发这个的目的是为了给自己扫开迷茫,告诉自己该进阶了,下面内容不一定官方和正确.全然个人理解,欢迎大家留言讨论 1.什么是hadoop 答:是google的核心算法MapReduce的一个开源实现. ...