Skip to main content
 Web开发网 » 站长学院 » 浏览器插件

Vue封装ajax的代码示例详解

本篇文章给大家带来的内容是关于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 XML();

//省略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 XML();

//省略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-");

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的代码示例详解的详细内容,更多请关注其它相关文章!

更多技巧请《转发 + 关注》哦!

评论列表暂无评论
发表评论
微信