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);
 
                 }
             }
         });
     });
 }

如有疑问，欢迎留言。