简化$.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 {
              //弹出错误提示
     }
});

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