/*
* ajax封装:
* 1。引入文件
* 2。新Vue () .ajax.get (url、数据、fn ojson),或新Vue () .ajax.post (url、数据、fn ojson)
* url:需要获取数据的文件地址(字符串)
*数据:需要发送的信息(可省略)(obj)
* fn:获取信息后的回调函数,接收到的返回值为数据(函数)
* ojson:是否需要转换为json格式(可省略)(设置为“json”)
*
* 3。.cancel .ajax.get新Vue()()():取消异步请求
* 4。新的Vue () .ajax.json (str):可转化json格式字符串
* */Vue.prototype.ajax={//添加url传送信息
addUrl:函数(url, obj) {//如果省略url,则为帖子请求,令obj为url,令url为null
如果(arguments.length==1) {
obj=url;
url=零;
}//url不为空(得到请求:设置url信息)
如果(! ! url) {
(var k obj) {
url +=(url.indexOf (“& # 63;”)==1 & # 63;" & # 63;:“和”);
url +=encodeURIComponent (k) + "=" + encodeURIComponent (obj [k]);
}
其他}{//后请求(设置数据信息)
url=" ";
(var k obj) {
url +=encodeURIComponent (k) + "=" + encodeURIComponent (obj [k]);
url +=昂汀?
}//删除最后一个,
var arr=url.split (" ");
arr.pop ();
url=arr.join (" ");
}//返回拼接好的信息
返回的url;
},
得到:函数(url、数据、fn ojson) {
这一点。xhr=new XMLHttpRequest ();//省略数据时,即不发送数据
如果(typeof数据https://www.yisu.com/zixun/==昂?{
ojson=fn;
fn=数据;
data=https://www.yisu.com/zixun/{};
}//合并url和数据信息
url=this.addUrl (url,数据)//是否异步发送
this.xhr.open(“获得”,url,真的);
this.xhr.send(空);//当请求完成之后调用回调函数返回数据
this.success (fn ojson);//链式编程
返回;
},
职位:函数(url、数据、fn ojson) {
这一点。xhr=new XMLHttpRequest ();//省略数据时,即不发送数据
如果(typeof数据https://www.yisu.com/zixun/==昂?{
ojson=fn;
fn=数据;
data=https://www.yisu.com/zixun/{};
}//合并数据信息
data=this.addUrl(数据);//是否异步发送
this.xhr.open(“文章”,url,真的);
this.xhr。setRequestHeader(“内容类型”,“应用程序/x-www-form-urlencoded”);
this.xhr.send(数据);//当请求完成之后调用回调函数返回数据
this.success (fn ojson);//链式编程
返回;
},//字符串转换json
json:函数(str) {
返回(新功能(“回归”+ str)) ();
},
成功:函数(fn ojson) {//当请求完成之后调用回调函数返回数据
var自我=;
this.xhr。onreadystatechange=function () {
var odata;
如果(self.xhr。readyState==4) {
如果(self.xhr.status>=200,,self.xhr.status<300) | | self.xhr。状态==304){
odata=https://www.yisu.com/zixun/self.xhr.responseText;//若为json则转化json格式
如果(ojson===json) {
odata=https://www.yisu.com/zixun/self.json (odata);
}
fn (odata);
其他}{
odata=扒肭蟛怀晒?“+ self.xhr.status;
fn (odata);
}
}
}
},//取消异步请求
取消:函数(){
this.xhr.abort ();
返回;
}
}
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Document
& lt;/head>
& lt; body>
& lt; div id=坝τ谩北?
& lt;按钮@click=" getInfo "祝辞点击获取信息& lt;/button>
& lt; span>{{味精}}& lt;/span>
& lt;/div>
& lt;脚本src=" https://www.yisu.com/zixun/vue.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/vue-ajax.js "祝辞& lt;/script>
& lt; script>
var vm=new Vue ({
埃尔:“#应用”,
数据:{
味精:“”,
},
方法:{
getInfo:函数(){
var自我=;
this.ajax.get (1. json, {
电话:123456,
地址:“池州市”
}、功能(数据){
self.msg [1] . name=数据
}," json ");
}
}
}）
& lt;/script>
& lt;/body>
& lt;/html>
(
{
“名称”:“张三”,
“年龄”:18,
“性”:“男人”
},
{
“名称”:“李四”,
“年龄”:20,
“性”:“女人”
},
{
“名称”:“王五”,
年龄:22岁
“性”:“男人”
}
)
