vue 公共方法封装 ajax赋值,Vue封装完美ajax

HTML文件：

Document

点击猎取信息

{{ msg }}

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");

}

}

})

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"

}

]