简化$.ajax的插件jquery.sdajax的使用说明

前言

jQuery.ajax是jQuery使用得最频繁的方法之一，笔者在使用的过程，使用的参数基本上固定，因此往往会有很多冗余的代码产生。慢慢笔者开始厌倦了原始的写法，想精简一套简单的出来。虽然jQuery里有jQuery.post、jQuery.get、jQuery.getJSON的精简的方法，但是无法满足要求。同时，由于笔者做后台做得比较多，因此使用$.ajax时，都会使用遮罩层，请求结束时，关闭遮罩层。随着功能的不断累加，就生成下面用于ajax请求的插件。遮罩层采用Layer实现（一款非常不错的弹出层插件，官方文档）

插件代码

/*!*********************************************
* Copyright (C) Corporation. All rights reserved.
*
* Author      :  lihaitao
* Email        : lhtzbj12@126.com
* Create Date  : 2017-01-22
* Description  : 自定义的简化ajax请求扩展,依赖layer插件(一款非常优秀的弹出层插件),默认datatype='json',async=true
* Version      : V1.0.2
*
* Revision History:
*      Date         Author               Description
*      2017-09-22   lihaitao               将async默认值改成true,同步下load出不来
*      2017-01-22   lihaitao               将async默认值改成false
*      2017-01-17   lihaitao               create
*
***********************************************
调用示例
$.sdpost('/home/index', {'name':'lht'});
$.sdpost('/home/index', {'name':'lht'}, function (re) {
alert(re.code);
},false,'json');
//传入参数
参数1：请求的地址
参数2：提交的值
参数3：成功时的回调函数
参数4：async的值，默认true
参数5：dataType同ajax里的dataType,默认'josn'
*/
(function ($) {
$.extend({
sdpost: function (url, data, success, async, dataType) {
if (typeof (data) === 'undefined' || data === null) data = {};
if (typeof (async) === 'undefined' || async === null) async = true;
if (typeof (dataType) === 'undefined' || dataType === null) dataType = 'json';
$.ajax({
url: url,
data: data,
type: 'post',
async: async,
dataType: dataType,
beforeSend: function (XHR) {
parent.layer.load();
},
complete: function (XHR, TS) {
parent.layer.closeAll('loading');
},
success: function (data) {
if (success) {
success(data);
}
},
error: function (XHR, msg, e) {
if (typeof (XHR.responseText) !== 'undefined') {
if (XHR.responseText.indexOf('HttpRequestValidationException') > -1) {
parent.layer.alert("请求失败：" + '您输入的内容里有潜在危险的字符，例如：“&#” 等', { icon: 2, title: '错误' });
} else {
parent.layer.alert("请求失败：" + XHR.responseText, { icon: 2, title: '错误' });
}
}
else {
parent.layer.alert("请求失败", { icon: 2, title: '错误' });
}
}
});
},
sdget: function (url, data, success, async, dataType) {
if (typeof (data) === 'undefined') data = {};
if (typeof (async) === 'undefined' || async === null) async = true;
if (typeof (dataType) === 'undefined' || dataType === null) dataType = 'json';
$.ajax({
url: url,
data: data,
type: 'get',
async: async,
dataType: dataType,
beforeSend: function (XHR) {
parent.layer.load();
},
complete: function (XHR, TS) {
parent.layer.closeAll('loading');
},
success: function (data) {
if (success) {
success(data);
}
},
error: function (XHR, msg, e) {
if (typeof (XHR.responseText) !== 'undefined') {
if (XHR.responseText.indexOf('HttpRequestValidationException') > -1) {
parent.layer.alert("请求失败：" + '您输入的内容里有潜在危险的字符，例如：“&#” 等', { icon: 2, title: '错误' });
} else {
parent.layer.alert("请求失败：" + XHR.responseText, { icon: 2, title: '错误' });
}
}
else {
parent.layer.alert("请求失败", { icon: 2, title: '错误' });
}
}
});
}
});
})(jQuery);

传入的参数

参数	默认值	功能
参数1		请求的地址
参数2		提交的值
参数3		成功时的回调函数
参数4	true	async的值
参数5	json	dataType同ajax里的dataType

调用示例

$.sdpost(‘/user/list’,{'orgid':1}, function (re) {
if (re.code == 1) {
//处理回返的数据
}
else {
//弹出错误提示
}
});

只要简单的一句话就将发出请求的显示遮罩层、发出请求、请求成功后回调、请求失败时弹出错误显示、请求结束关闭遮罩层等功能都实现了，使用起来特别方便。