您的位置：首页 > 产品设计 > UI/UE

数据交互vue-resource

2017-07-04 23:55 756 查看
原文地址：http://www.cnblogs.com/zycbloger/p/6428014.html


基本语法

必须引入一个库：vue-resource github地址

// 基于全局Vue对象使用http
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

// 在一个Vue实例内使用$http
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);



vue-resource的请求API是按照REST风格设计的，它提供了7种请求API：
get(url,
[options])

head(url,
[options])

delete(url,
[options])

jsonp(url,
[options])

post(url,
[body], [options])

put(url,
[body], [options])

patch(url,
[body], [options])


Options

ParameterTypeDescription
url
string
请求的UR
body
Object
, 
FormData
, 
string
request body
headers
Object
request header
params
Object
请求的URL参数对象
method
string
请求的HTTP方法，例如：'GET', 'POST'或其他HTTP方法
timeout
number
单位为毫秒的请求超时时间 (0 表示无超时时间)
before
function(request)
请求发送前的处理函数，类似于jQuery的beforeSend函数
progress
function(event)
ProgressEvent回调处理函数
credentials
boolean
表示跨域请求时是否需要使用凭证
emulateHTTP
boolean
发送PUT, PATCH, DELETE请求时以HTTP POST的方式发送，并设置请求头的X-HTTP-Method-Override
emulateJSON
boolean
将request body以application/x-www-form-urlencoded content type发送


1. 向文本发出get请求

准备一个1.txt 的文本数据，时面的内容是：welcomet to vue!!!

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script src="http://files.cnblogs.com/files/zycbloger/vue-resource.min.js"></script>
<script type="text/javascript">
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{
msg:'Hello World!',
},
methods:{
get:function(){
//发送get请求
this.$http.get('1.txt').then(function(res){
alert(res.body);
},function(){
alert('请求失败处理');   //失败处理
});
}
}
});
}
</script>
</head>
<body>
<div id="box">
<input type="button" @click="get()" value="按钮">
</div>
</body>
</html>


上面代码实现了，点击按钮，就发送get请求，成功就会执行弹窗 welcomet to vue!!!


2. 关于向后端请求，并带参数的写法

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script src="http://files.cnblogs.com/files/zycbloger/vue-resource.min.js"></script>
<script type="text/javascript">
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{
msg:'Hello World!',
},
methods:{
get:function(){
//发送get请求
this.$http.get('get.do',{a:1,b:2}).then(function(res){
alert(res.body);
},function(){
alert('请求失败处理');   //失败处理
});
},

post:function(){
//发送post请求
this.$http.post('post.do',{a:1,b:2}).then(function(res){
alert(res.body);
},function(){
alert('请求失败处理');   //失败处理
});
}
}
});
}
</script>
</head>
<body>
<div id="box">
<input type="button" @click="get()" value="按钮get">
<input type="button" @click="post()" value="按钮post">
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航