php中jquery封装的ajax,用ajax二次封装jquery实例详解

本文主要和大家介绍用ajax二次封装jquery实例,Ajax 的全称是Asynchronous JavaScript and XML 异步的javaScript和XML,下面这篇文章主要给大家介绍了关于二次封装jquery ajax办法示例,文中通过示例代码介绍的非常详细,需要的朋友们下面来一起看看吧。

前言

Ajax 的全称是Asynchronous JavaScript and XML 异步的javaScript和XML

AJax所涉及到得技术:

1.使用CSS和XHTML来表示。

2. 使用DOM模型来交互和动态显示。

3.使用XMLHttpRequest来和服务器进行异步通信。(核心)

4.使用javascript来绑定和调用。

在我们前端处理数据的时候免不了要 ajax 与后台通信, ajax 是通过 XMLHttpRequest 对象与服务器进行通信的, jquery 在 XMLHttpReaquest 的基础上封装了 $.ajax 办法进行通信, $.ajax 办法实用性非常强,又非常简单易用。 本次二次封装 query ajax,参考 express 可以添加中间件处理数据,返回 Promise(Defferd) 对象,减少回调, 写 ajax 更加简洁、优雅。

$.ajax({

url: url,

data: data,

dataType: 'json',

type: 'get',

success: new Function(){},

error: new Function(){},

.......

})

大部分的时候我们只需要传入 url 和 data, 就可以获取到我们想到的数据了。

痛点

但是在项目中使用 $.ajax, 它还是有一些痛点的

就是现在基本所有项目的 ajax 返回的数据也是进行了二次封装,加入了后台在处理业务逻辑时的信息。

从返回 data, 变成 了 {code: 200, data:{}, err_msg:''}

如果每一个 ajax 请求回来都要判断 code 是否正确再进行业务逻辑处理或者报错提醒, 整个项目下来也太冗余了,

$.ajax({

url: url,

data: data,

success: function(data){

if(data.code == 200) {

dosomething()

} else {

alert(data.err_msg);

}

}

})

为了解决这个问题,我们用一个函数再次封装 $.ajax, 把这种正确与否判断再处理业务逻辑或者报错提醒提取出来做成公共的部分。

util.ajax = function(obj, successFn){

$.ajax({

url: obj.url || '/interface',

data: obj.data || {},

dataType: obj.dataType || 'json',

type: obj.type || 'get',

success: function(data){

if (data.code != 200) {

alert(data.err_msg);

} else {

successFn(data.data)

}

},

error: function(err){

alert(err)

}

})

}

promise

用 util.ajax 代替 $.ajax 使用就可以减少了业务错误的判断啦。 我们再来完善下, 不使用回调的方式,使用 promise 的方式调用, 减少回调,让代码更清晰。

util.ajax = function(obj) {

var deferred = $.Deferred();

$.ajax({

url: obj.url || '/interface',

data: obj.data || {},

dataType: obj.dataType || 'json',

type: obj.type || 'get',

}).success(function (data) {

if (data.code != 200) {

deferred.reject(data.err_msg);

} else {

deferred.resolve(data.data)

}

}).error(function (err) {

deferred.reject('接口出错,请重试');

})

return deferred.fail(function (err) {

alert(err)

});

}

// 调用

var obj = {

url: '/interface',

data: {

interface_name: 'name',

interface_params: JSON.stringify({})

}

};

util.ajax(obj)

.done(function(data){

dosomething(data)

})

中间件

这是一个公共的办法,但是有时候我们需要处理差异化啊, 我们参考 express 引入一个中间件来解决差异化问题。

util.ajax = function(obj, middleware) {

var deferred = $.Deferred();

$.ajax({

url: obj.url || '/interface',

data: obj.data || {},

dataType: obj.dataType || 'json',

type: obj.type || 'get',

}).success(function (data) {

if (data.code != 200) {

deferred.reject(data.err_msg);

} else {

deferred.resolve(data.data)

}

}).error(function (err) {

deferred.reject('接口出错,请重试');

})

// 添加中间件

if(!middleware) {

middleware = function(){};

}

return deferred.done(middleware).fail(function (err) {

message({

content: err,

type: 'error',

showLeftIcon: true,

duration: 5000

});

});

}

// 调用

// 调用

var obj = {

url: '/interface',

data: {

interface_name: 'name',

interface_params: JSON.stringify({})

}

};

var middleware = function(data) {

data.forEach(function(item){

item.fullName = item.firstName + item.lastName

})

}

util.ajax(obj, middleware)

.done(function(data){

console.log(data.fullName)

})

相关推荐:

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值