jQuery ajax(异步)请求封装,解决重复提交,调用困难,统一异步请求函数

@[TOC](jQuery ajax(异步)请求封装,解决重复提交,调用困难,统一异步请求函数)

场景说明

你是否有这样的经历，领导说要加个异步请求登录超时提醒？然后加班到深夜整个项目修改异步请求代码。说要要统一异步请求响应提示框？又整体改一遍。我觉得你缺一个封装，一个封装完用起来很方便，很舒服的封装。

代码如下（拿去用吧，我用了好几年了）

注：以下代码依赖 jQuery、layer

window._timeid_ajax = 0;//用于ajax时延迟500ms弹出 加载框的 setTimeout 的id

/**
 * ajaxGet请求，回调中返回字符值会触发 layer.msg
 * @param {any} url 请求地址，不可空
 * @param {any} fnCallback 请求成功回调，可空，回调返回String值作为提示，不返回不提示
 * @param {any} fnErr 当发生错误时的处理程序，可空，回调返回String值作为提示，不返回不提示
 * @param {any} isShield 是否立即给予遮蔽层，默认超过500ms给遮蔽层，可空
 * @param {any} isSync 是否用同步请求，默认false，可空
 * @param {any} conType contentType，可空
 */
function ajaxGet(url, fnCallback, fnErr, isShield, isSync, conType) {
    _ajax(url, "", "get", fnCallback, fnErr, isShield, isSync, conType);
}
/**
 * ajaxPost请求，回调中返回字符值会触发 layer.msg
 * @param {any} url 请求地址，不可空
 * @param {any} dat 请参数，可以是字符串、对象
 * @param {any} fnCallback 请求成功回调，可空，回调返回String值作为提示，不返回不提示
 * @param {any} fnErr 当发生错误时的处理程序，可空，回调返回String值作为提示，不返回不提示
 * @param {any} isShield 是否立即给予遮蔽层，默认超过500ms给遮蔽层，可空
 * @param {any} isSync 是否用同步请求，默认false，可空
 * @param {any} conType contentType，可空
 */
function ajaxGet(url, dat, fnCallback, fnErr, isShield, isSync, conType) {
    _ajax(url, dat, "post", fnCallback, fnErr, isShield, isSync, conType);
}

/**
 * 内部方法！ajax请求，回调中返回字符值会触发 layer.msg
 * @param {any} url 请求地址，不可空
 * @param {any} dat 请参数，可以是字符串、对象
 * @param {any} method 请求方式,如: post  get，默认get,可空
 * @param {any} fnCallback 请求成功回调，可空，回调返回String值作为提示，不返回不提示
 * @param {any} fnErr 当发生错误时的处理程序，可空，回调返回String值作为提示，不返回不提示
 * @param {any} isShield 是否立即给予遮蔽层，默认超过500ms给遮蔽层，可空
 * @param {any} isSync 是否用同步请求，默认false，可空
 * @param {any} conType contentType，可空
 */
function _ajax(url, dat, method, fnCallback, fnErr, isShield, isSync, conType) {
    isShield = (typeof isShield).toLowerCase() == "undefined" ? "def" : isShield;
    isSync = (typeof isSync).toLowerCase() == "undefined" ? true : isSync;
    url = url == "#" ? document.location.toString() : url;//IE中不能用#号代替document.location.toString()
    if (!url) { alert("请求地址不可空"); return; }
    if (method == "post" && !dat) { alert("method为post时不可空dat不可空"); return; }

    //防快速重复提交
    var _signKey = url + JSON.stringify(dat || "");
    window._ajax_sign_keys = window._ajax_sign_keys || [];
    if (window._ajax_sign_keys.indexOf(_signKey) > -1) { console.log("已阻止重复提交"); return; }
    window._ajax_sign_keys.push(_signKey);

    var _fnCallback = function (d) {
        clearTimeout(_timeid_ajax);/*清除遮蔽层计时*/
        setTimeout(' layer.close(_layer_idx.shift())', (isShield == "def" ? 500 : 0));/*关闭遮蔽层*/
        var msg = fnCallback && fnCallback(d);/*回调*/
        msg && layer.msg(msg, { time: msg.length > 6 ? (msg.length / 6 * 1000) : 2000 });/*统一用 layer.msg*/
        window._ajax_sign_keys.remove(_signKey);/*清除 防快速重复提交*/
    }
    var _fnErr = function (d) {
        clearTimeout(_timeid_ajax);/*清除遮蔽层计时*/
        setTimeout(' layer.close(_layer_idx.shift())', (isShield == "def" ? 500 : 0));/*关闭遮蔽层*/
        var msg = fnErr && fnErr(d);/*错误回调*/
        msg && layer.msg(msg, { time: msg.length > 6 ? (msg.length / 6 * 1000) : 2000 });/*统一用 layer.msg*/
        window._ajax_sign_keys.remove(_signKey);/*清除 防快速重复提交*/
    }

    if (isShield != false) {
        _timeid_ajax = setTimeout(function () {
            if ((typeof isShield).toLowerCase() == "undefined") return;/*没引用？不遮蔽了*/
            if ($(".layui-layer-shade").length == 0) {
                _layer_idx.push(layer.load(1, { shade: [0.1/*透明度*/, '#ffffff'], time: 100000 }));
            }
        }, (isShield == "def" ? 500 : 0));/*如果是默认值,超过500ms给遮蔽层*/
    }

    $.ajax({
        type: method,
        url: url,
        data: dat,
        async: isSync,
        cache: false,
        contentType: conType,
        //dataType: "json",//使用默认值，让jQuery自己去识别
        success: _fnCallback,
        error: _fnErr
    });
}

调用示例

ajaxGet("https://www.80juchang.com", function (res) { return "请求成功 " + res.length; });
ajaxPost("https://www.80juchang.com", {key1:111,key2:222}, function (res) { return "请求成功 " + res.length; });

原文链接：http://blog.albsz.cn/2020-07-17-jQueryAjax.html

打赏