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年已过半,不能再这么晃荡下去了. 参加了网易微专业-前端攻城狮 培训,目前进行到大作业开发阶段,感觉举步维艰.但是无论如何,不 ...
随机推荐
- [Asp.net]使用flexpaper+swftools大文件分页转换实现在线预览
引言 之前总结了在线预览几种常见解决方案,可以戳这里: http://www.cnblogs.com/wolf-sun/p/3569960.html http://www.cnblogs.com/wo ...
- 一段js的思考
写了很久JS,还以为这段代码可以正常输出,谁知道输出超乎我的形象: <!DOCTYPE html> <html> <head> <meta charset=& ...
- Android程序调试
1. 使用Log.d方法输出Debug日志信息. Log.d方法用来输出DEBUG故障日志信息,该方法有两种重载形式,其中开发人员经常用到的重载形式语法如下: public static int d( ...
- 【LeetCode】Jump Game (一维动态规划 + 线性扫描)
Given an array of non-negative integers, you are initially positioned at the first index of the arra ...
- 将项目的版本控制从Vss迁移到Git
之前在Vs2008上一直使用的是Vss版本控制,现在将版本控制更改为Git 迁移原因是其他公司想要在我们公司开发的一个CRM系统做一些定制(个性化需求,将软件上的公司名称和链接更改为他们的或一些跟我们 ...
- C#控件一览表
C#控件一览表 .窗体 .常用属性 ()Name属性:用来获取或设置窗体的名称,在应用程序中可通过Name属性来引用窗体. () WindowState属性: 用来获取或设置窗体的窗口状态. 取值有三 ...
- 通过Intel XDK编写跨平台app(二)
通过Intel XDK编写跨平台app(一) 通过Intel XDK编写跨平台app(二) 在这个系列的上一篇文章中,我们大致了解了Interl XDK的概况.在这一部分中,我们会详细地介绍如何通过这 ...
- 树形dp hdu-4616-Game
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4616 题目大意: 给一棵树,每个节点有一个礼物值及是否有trick,每来到一个节点必须拿礼物,如果该 ...
- IDEA20181.4破解
1.下载破解补丁: http://idea.lanyus.com/jar/JetbrainsIdesCrack-4.2-release-sha1-3323d5d0b82e716609808090d3d ...
- 微信群的id
今天网速慢了,竟然把微信群的id卡出来了,记录一下. 格式应该是一个像QQ群一样的数字,然后+@chatroom 看图! 文章来源:刘俊涛的博客 欢迎关注,有问题一起学习欢迎留言.评论.