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年已过半,不能再这么晃荡下去了. 参加了网易微专业-前端攻城狮 培训,目前进行到大作业开发阶段,感觉举步维艰.但是无论如何,不 ...
随机推荐
- 在安卓上，微信公众号无法分享到QQ的解决办法之一
今天做一个微信公众号分享功能,参考微信sdk,代码几乎没有任何问题,但就是分享到QQ失败,以下是我QQ分享部分的代码: wx.onMenuShareQQ({ title: '快来和我一起玩转大脑', ...
- Workflow：采用坐标变换（移动和旋转）画箭头
背景 流程设计器的连线部分需要画一个箭头代表连接的方向,下图是期望的效果: 刚开始我准备采用三角函数(sin和cos)来计算三角的坐标,实现的过程真不爽(有兴趣的朋友可以试试),就在完工的时候,突然想 ...
- Android之MVC模式
MVC (Model-View-Controller):M是指逻辑模型,V是指视图模型,C则是控制器.一个逻辑模型可以对于多种视图模型,比如一批统计数据 你可以分别用柱状图.饼图来表示.一种视图模型也 ...
- OpenCV定制化创建角点检测子
定制化创建角点检测子 目标 在这个教程中我们将涉及: 使用 OpenCV 函数 cornerEigenValsAndVecs 来计算像素对应的本征值和本征向量来确定其是否是角点. 使用OpenCV 函 ...
- WEB渗透之对于开了3389远程连接不上的总结
对于开了3389,连接不上,有几个方面的原因,我来总结下,哇咔咔,这几天提好几台服务器都TM这样,分析下, 原因1.远程桌面端口被更改.2.对方服务器处于内网. 3.防火墙拦截.4.TCP/IP安全限 ...
- 弹性方框模型 (Flexible Box Model) 快速入门
简介 我可以肯定,您对于页面上水平或垂直排列的样式元素已经了解得够多了.但是,CSS 还缺少适用于此任务的合适机制.了解 CSS3 弹性方框模型(简称 Flexbox) 该草案将 Flexbox 描述 ...
- 【SSH 基础】SSH框架--struts深入具体解释（一）
学习了struts,可是对于它的由来,以及为什么使用action和struts.xml的方式而不採用曾经的servlet方式.有些疑问,究竟之前的方式有什么弊端,struts又给我们带来了什么便利? ...
- Thinkphp学习笔记5-URL生成U方法
为了配合所使用的URL模式,我们需要能够动态的根据当前的URL设置生成对应的URL地址,为此,ThinkPHP内置提供了U方法,用于URL的动态生成,可以确保项目在移植过程中不受环境的影响. 定义规则 ...
- [AngularJS] Angular 1.3 new $q constructor
<!DOCTYPE html> <html ng-app="app"> <head lang="en"> <meta ...
- springMVC之增删改查
一.核心原理 1. 用于发送请求给server: /home.htm 2. 请求被DispatchServlet拦截到 3. DispatchServlet通过HandleMapping检查url有没 ...