Ajax的简单封装

简单封装AjaxSimple.js

// submitAjax(post方式提交)
function submitAjax(form, callbak, success, cache, alone) {
    var cache = cache || true;
    var form = $(form);
    var url = form.attr('action');
    var data = form.serialize();
    ajax(url, data, callbak, success, cache, alone, false, 'post', 'json');
}
/*//调用实例 
$(function () { 
    $('#form-login').submit(function () { 
        submitAjax('#form-login');
        return false; 
    }); 
});*/
// ajax提交(post方式提交)
function post(url, data, callbak, success, cache, alone) {
    ajax(url, data, callbak, success, cache, alone, false, 'post', 'json');
}
// ajax提交(get方式提交)
function get(url,data,callbak, success, cache, alone) {
    ajax(url, data, callbak, success,cache, alone, false, 'get', 'json');
}
// jsonp跨域请求(get方式提交)
function jsonp(url,data, callbak, success, cache, alone) {
    ajax(url,data, callbak, success, cache, alone, false, 'get', 'jsonp');
}
function Jsonp(url,data, callbak, success,complete,error) {
    ajax(url,data, callbak, success, null, null, false, 'get', 'jsonp',null,function(){},complete,error);
}
/* ajax封装                //后边的参数没有可以不写，中间的不能省略
* url 发送请求的地址
* data ajax请求参数
*success 请求成功后执行的方法
* cache 浏览器历史缓存 默认为false
* alone 独立提交（一次有效的提交）默认为false
* type 请求的方式 默认为get
* dataType 返回JSON数据 默认为JSON格式数据
*contentType 默认"application/x-www-form-urlencoded" 复杂json数据请用application/json
* async 异步请求 默认为true
*beforeSend 请求之前执行
*complete 请求完成执行
*error 请求失败执行
*/
//页面加载所要进行的操作
$(function () {
    //设置ajax当前状态(是否可以发送);
    ajaxStatus = true;
});

function ajax(url, data, callbak, success, cache, alone, async, type, dataType, contentType, beforeSend, complete, error) {
    var type = type || 'post';//请求类型
    var dataType = dataType || 'json';//接收数据类型
    var contentType = contentType || "application/x-www-form-urlencoded";
    var async = async || true;//异步请求
    var alone = alone || false;//独立提交（一次有效的提交）
    var cache = cache || false;//浏览器历史缓存
    var callbak = callbak || function(data){}
    var success = success || function (data) {
        /*console.log('请求成功');*/
        // setTimeout(function () {
        //     layer.msg(data.Message,{time:800});//通过layer插件来进行提示信息
        // }, 500);
        if (data.Code == 200) {//服务器处理成功
            setTimeout(function () {
                callbak;
                if (data.url) {
                    location.replace(data.url);
                } else {
                    // location.reload(true);
                    callbak(data)
                }
            }, 500);
        }
        else {//服务器处理失败
            if (alone) {//改变ajax提交状态
                ajaxStatus = true;
            }
        }
    };
    var beforeSend = beforeSend || function () {
        layer.msg('加载中', {//通过layer插件来进行提示正在加载 
            icon: 16, shade: 0.01
        }, function () {
            //do something
        });
    };
    var complete = complete || function (data) {
        ajaxStatus = true;
        //console.log(data)
    };
    var error = error || function (data) {
        /*console.error('请求成功失败');*/
        /*data.status;//错误状态吗*/
        layer.closeAll('loading');
        setTimeout(function () {
            if (data.status == 404) {
                layer.msg('请求失败，请求未找到');
            }
            else if (data.status == 503) {
                layer.msg('请求失败，服务器内部错误');
            }
            else {
                layer.msg('请求失败,网络连接超时');
            }
            ajaxStatus = true;
        }, 500);
    };
    /*判断是否可以发送请求*/
    if (!ajaxStatus) {
        return false;
    }
    ajaxStatus = false;//禁用ajax请求
    /*正常情况下1秒后可以再次多个异步请求，为true时只可以有一次有效请求（例如添加数据）*/
    if (!alone) {
        setTimeout(function () {
            ajaxStatus = true;
        }, 1000);
    }
    $.ajax({
        'url': url,
        'data': data,
        'type': type,
        'dataType': dataType,
        'contentType': contentType,
        'async': async,
        'success': success,
        'complete': complete,
        'error': error,
        'jsonpCallback': 'jsonp' + (new Date()).valueOf().toString().substr(-4),
        'beforeSend': beforeSend,
        'complete': complete,
    });
}

一般封装Common.js

var Common = (function () {
    var Common = {
        BindTable: function (table, url, uniqueid, queryid, columns) {
            $(table).bootstrapTable({
                // data: bt_data,
                url: url,
                dataType: "json",
                //search: 'true',
                method: 'get',                     //请求方式（*）
                //  contentType: "application/x-www-form-urlencoded", //post请求需要加的字段
                //toolbar: '#toorbar',                //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                sortable: true,                    //是否启用排序
                sortOrder: "asc",                  //排序方式
                queryParams: queryParams,           //传递参数（*）
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                      //初始化加载第一页，默认第一页
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [10, 20, 50, 100],        //可供选择的每页的行数（*）,
                smartDisplay: false,
                //strictSearch: true,
                //showColumns: true,                  //是否显示所有的列
                //showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                //clickToSelect: true,                //是否启用点击选中行
                //height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: uniqueid,                  //每一行的唯一标识，一般为主键列
                showToggle: false,                  //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                columns: columns
                //onLoadSuccess: function (data) {
                //    var result = data["rows"];
                //    $.each(result, function (index, content) {
                //        //loadfunc;
                //    }),
                //    $(table).bootstrapTable("load", data);
                //},
            });
            function queryParams(params) {
                var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                    sort: params.sort,
                    order: params.order,
                    limit: params.limit,   //页面大小
                    offset: params.offset,   //页码
                    queryid: queryid,
                };
                return temp;
            }
        },
        InputCheck: function (objval, type) {
            var reg = new RegExp();
            var erro = "";
            switch (type) {
                case "domain": reg = new RegExp("^[0-9A-Za-z](\.){4,15}$"); erro = "4~15位字母、数字组成!"; break;
                case "email": reg = new RegExp("^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$"); erro = "请输入正确的邮箱!"; break;
                case "account": reg = new RegExp("^[a-zA-Z0-9_-]{4,16}$"); erro = "4到16位（字母，数字，下划线，减号）"; break;
                case "pwd": reg = new RegExp("^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,18}$"); erro = "密码长度在6~18之间，必须同时包含字母和数字!"; break
                case "qq": reg = new RegExp("^[1-9][0-9]{4,10}$"); erro = "请输入5~11位QQ号码"; break;
                // case "phone": reg = new RegExp("^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$"); erro = "请输入正确的手机号码"; break;
                case "wechat": reg = new RegExp("^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$"); erro = "6至20位，以字母开头，字母，数字，减号，下划线"; break;
            }
            if (objval === "") { //输入不能为空
                layer.msg("输入不能为空!");
                return false;
            } else if (!reg.test(objval)) { //正则验证不通过，格式不对
                layer.msg(erro);
                return false;
            }
            else return true;
        },
        SetSimple: function (value, table, identify) {
            var lst = [];
            if (value == null || value == undefined || value == "")//多删
            {
                var a = $(table).bootstrapTable('getSelections');
                $.each(a, function () { lst.push("'" + this[identify] + "'") });
                if (lst == "") {
                    layer.msg("请选择要操作的数据！");
                    return;
                }
            }
            else { lst.push("'" + value + "'"); }//单删
            return lst;
        },
        SerializeObject: function (obj) {
            var data = {};
            var t = $(obj).serializeArray();
            $.each(t, function () {
                data[this.name] = this.value;
            });
            return data;
        },
        //onkeydown事件禁用文本框粘帖
        fncKeyStop: function (evt) {
            if (!window.event) {
                var keycode = evt.keyCode;
                var key = String.fromCharCode(keycode).toLowerCase();
                if (evt.ctrlKey && key == "v") {
                    evt.preventDefault();
                    evt.stopPropagation();
                }
            }
        },
        HTMLEncode: function (html) {
            var temp = document.createElement("div");
            (temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html);
            var output = temp.innerHTML;
            temp = null;
            return output;
        },
        htmlDecode: function (text) {
            //1.首先动态创建一个容器标签元素，如DIV
            var temp = document.createElement("div");
            //2.然后将要转换的字符串设置为这个元素的innerHTML(ie，火狐，google都支持)
            temp.innerHTML = text;
            //3.最后返回这个元素的innerText(ie支持)或者textContent(火狐，google支持)，即得到经过HTML解码的字符串了。
            var output = temp.innerText || temp.textContent;
            temp = null;
            return output;
        },
        // 全选 多选
        selectMore: function (elTotal, elMany) {
            var checkboxs = elMany;
            var mainbox = elTotal;
            // console.log(checkboxs.length) ;
            //console.log(mainbox.length)
            mainbox.on("ifChecked ifUnchecked", function (event) {
                if (event.type == 'ifChecked') {
                    checkboxs.iCheck('check');
                } else {
                    checkboxs.iCheck('uncheck');
                }
            });
            checkboxs.on('ifChanged', function (event) {
                //下面的是用子选项控制mainbox的业务逻辑
                if (checkboxs.filter(':checked').length == checkboxs.length) {
                    mainbox.prop('checked', true);
                } else {
                    mainbox.prop('checked', false);
                }
                mainbox.iCheck('update')
            });
        },
        // 表格分页
        tabledata: function (el) {
            el.dataTable({
                // lengthMenu: [ 10, 20, 30],//这里也可以设置分页，但是不能设置具体内容，只能是一维或二维数组的方式，所以推荐下面language里面的写法。
                paging: true,//分页
                ordering: false,//是否启用排序
                searching: false,//搜索
                bLengthChange: false,   //去掉每页显示多少条数据方法
                language: {
                    paginate: {//分页的样式内容。
                        previous: "<",
                        next: ">",
                        first: "",
                        last: ""
                    },

                    zeroRecords: "没有内容",//table tbody内容为空时，tbody的内容。
                    //下面三者构成了总体的左下角的内容。
                    info: "共_PAGES_ 页，显示第_START_ 到第 _END_个",//左下角的信息显示，大写的词为关键字。
                    infoEmpty: "0条记录",//筛选为空时左下角的显示。
                    infoFiltered: ""//筛选之后的左下角筛选提示，
                },
                pagingType: "full_numbers",//分页样式的类型

            });

        },
        // 匹配颜色高亮
        keywordscolorful: function (str, key) {
            var reg = new RegExp("(" + key + ")", "g");
            var newstr = str.replace(reg, "<font style='background:#ff0;'>$1</font>");
            return newstr;
        },
        loadingEffect:function(){
            var loadingEl=`
            <div class="gray-bg">
            <div class="ibox ">
                <div class="ibox-content">
                    <div class="spiner-example">
                        <div class="sk-spinner sk-spinner-three-bounce">
                            <div class="sk-bounce1"></div>
                            <div class="sk-bounce2"></div>
                            <div class="sk-bounce3"></div>
                        </div>
                    </div>
                </div>
           </div>`
        return loadingEl;
        }
    }
    return Common;
})();

Date.prototype.format = function (format) {
    var o = {
        "M+": this.getMonth() + 1, //month 
        "d+": this.getDate(), //day 
        "h+": this.getHours(), //hour 
        "m+": this.getMinutes(), //minute 
        "s+": this.getSeconds(), //second 
        "q+": Math.floor((this.getMonth() + 3) / 3), //quarter 
        "S": this.getMilliseconds() //millisecond 
    }

    if (/(y+)/.test(format)) {
        format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    }

    for (var k in o) {
        if (new RegExp("(" + k + ")").test(format)) {
            format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
        }
    }
    return format;
}