layui之初始化加分页重复请求问题解决

layui框架中的page困扰我很久，一个页面初始化后并且分页，导致初始化渲染请求一次，分页再请求了一次，一个接口就重复请求了2次，通过不停的分析和测试，最终解决了这个问题。

基于JQ的ajax二次封装的baseJqAjax：

//基于JQuery的baseJqAjax
function baseJqAjax ( options , error , success ) {

    options = options === undefined ? {} : options;

    var type = options.type === undefined ? 'post' : options.type;

    var async =options.async === undefined ? true : options.async;

    var url = options.url === undefined ? '' : options.url;

    var data = options.data === undefined ? {} : options.data;

    var dataType =options.dataType === undefined ? 'json' : options.dataType;

    $.ajax({

        type: type,

        async: async,

        url: url,

        data: data,

        dataType: dataType,

        error: function(err) { error&&error(err); },

        success: function(result) { success&&success(result); }

    });

}
/*使用方法有两种*/

//第一种逻辑较多的选择  其他参数不设置使用默认参数

baseJqAjax({url:url,data:data},error,success);

function error(err){

    //请求失败执行的代码
}

function success(result){
    
    //请求成功后执行的代码
}

//第二种适合业务逻辑较少 其他参数不设置使用默认参数
//
baseJqAjax({url:url,data:data},function error(err){

    //请求失败执行的代码
    
},function success(result){

    //请求成功后执行的代码
    
});

项目中某个页面的初始化分页并且可以搜索功能：

//init和page 里的接口都是同一个
function init(){

    baseJqAjax({url:url,data:data},function error(err){

        //请求失败执行的代码

    },function success(result){

        //请求成功后执行的代码
        //成功请求到数据result
        var data=result.data;
        var page=result.count;
        page(data,page);
    });
}

function page(data,page){

    layui.use('laypage', function(){

        var laypage = layui.laypage;

        laypage.render({

            elem: 'free',//注意，这里的 test1 是 ID，不用加 # 号

            count: page,

            groups:2, //数据总数，从服务端得到

            limit:2,    //每页的条数在这里设置

            jump: function(data, first){

                //page

                if(!first){

                   baseJqAjax({url:url,data:data},error,success);

                    function error(err){
                        //分页请求失败执行的代码
                    }

                    function success(result){
                        //分页请求成功后执行的代码
                    }
                } else {

                    //init

                     var html='';

                    for(var i=0;i<data.length;i++){

                        html += '<li>'+ data[i].parkingLotName + '</li>';

                    }

                    $('#ul').html(html);

                }
            }
        });
    });
}

如有疑问，欢迎留言。