本篇文章给大家带来的内容是关于vue封装ajax的代码示例详解，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
html文件：
<!doctype html><html><head> <meta charset="utf-8"> <title>document</title></head><body> <div id="app"> <button @click="getinfo">点击获取信息</button> <span>{{ msg }}</span> </div> <script src="vue.js"></script> <script src="vue-ajax.js"></script> <script> var vm=new vue({ el: #app, data: { msg: , }, methods: { getinfo: function (){ var self=this; this.ajax.get(1.json,{ tel: 123456, address: 杭州 },function (data){ self.msg=data[1].name },json); } } }) </script></body></html>
js文件：
/** ajax封装:* 1. 引入文件* 2. new vue().ajax.get(url,data,fn,ojson), 或 new vue().ajax.post(url,data,fn,ojson)* url: 需要获取数据的文件地址 (string)* data: 需要发送的信息 (可省略) (obj)* fn: 获取信息后的回调函数,接收到的返回值为data (function)* ojson: 是否需要转换为json格式 (可省略) (设置为 json)** 3. new vue().ajax.get().cancel(): 取消异步请求* 4. new vue().ajax.json(str): 可转化json格式字符串**/vue.prototype.ajax={ //添加url传送信息 addurl: function (url,obj){ //如果省略url，则为post请求，令obj为url，令url为null if(arguments.length==1){ obj=url; url=null; } //url不为空(get请求: 设置url信息) if(!!url){ for(var k in obj){ url += (url.indexof(?)==-1 ? ? : &); url+=encodeuricomponent(k)+ = +encodeuricomponent(obj[k]); } }else{ //post请求(设置data信息) url=; for(var k in obj){ url+=encodeuricomponent(k)+ = +encodeuricomponent(obj[k]); url+=&; } //删除最后一个& var arr=url.split(); arr.pop(); url=arr.join(); } //返回拼接好的信息 return url; }, get: function (url,data,fn,ojson){ this.xhr=new xmlhttprequest(); //省略data时,即不发送数据 if(typeof data ==function){ ojson=fn; fn=data; data={}; } //合并url和data信息 url=this.addurl(url,data) //是否异步发送 this.xhr.open(get,url,true); this.xhr.send(null); //当请求完成之后调用回调函数返回数据 this.success(fn,ojson); //链式编程 return this; }, post: function (url,data,fn,ojson){ this.xhr=new xmlhttprequest(); //省略data时,即不发送数据 if(typeof data ==function){ ojson=fn; fn=data; data={}; } //合并data信息 data=this.addurl(data); //是否异步发送 this.xhr.open(post,url,true); this.xhr.setrequestheader(content-type, application/x-www-form-urlencoded); this.xhr.send(data); //当请求完成之后调用回调函数返回数据 this.success(fn,ojson); //链式编程 return this; }, //字符串转换json json: function (str){ return (new function(return + str))(); }, success: function (fn,ojson){ //当请求完成之后调用回调函数返回数据 var self=this; this.xhr.onreadystatechange=function (){ var odata; if(self.xhr.readystate == 4){ if((self.xhr.status>=200 && self.xhr.status<300) || self.xhr.status == 304){ odata=self.xhr.responsetext; //若为json则转化json格式 if(ojson===json){ odata=self.json(odata); } fn(odata); }else{ odata=request was unsuccessful: +self.xhr.status; fn(odata); } } } }, //取消异步请求 cancel: function (){ this.xhr.abort(); return this; }}
后台获取或者前端构造的数据结构：
[ { name: 张三, age: 18, sex: man }, { name: 李四, age: 20, sex: woman }, { name: 王五, age: 22, sex: man }]
以上就是vue封装ajax的代码示例详解的详细内容。