数据交互vue-resource

来源：互联网发布：读诗书明德知礼下联编辑：程序博客网时间：2024/05/29 23:45

原文地址：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

ParameterTypeDescriptionurlstring请求的URbodyObject, FormData, stringrequest bodyheadersObjectrequest headerparamsObject请求的URL参数对象methodstring请求的HTTP方法，例如：'GET', 'POST'或其他HTTP方法timeoutnumber单位为毫秒的请求超时时间 (0 表示无超时时间)beforefunction(request)请求发送前的处理函数，类似于jQuery的beforeSend函数progressfunction(event)ProgressEvent回调处理函数credentialsboolean表示跨域请求时是否需要使用凭证emulateHTTPboolean发送PUT, PATCH, DELETE请求时以HTTP POST的方式发送，并设置请求头的X-HTTP-Method-OverrideemulateJSONboolean将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>

阅读全文

0 0