jQuery实现下拉加载数据

在用户进入页面，数据非常的大，发送Ajax的时候就会存在页面卡顿，影响用户的体验，这时候我们就需要通过分页的方式获取数据。这里结合若依的前端AIP进行使用的，前端若依API文档可以点击此访问

代码实现

在外部可以定义一个我们需要发送的Ajax的data数据，首先我是自己封装了一个Ajax在全局，通过th语法绑定在footer中，然后只要在页面引入这个js就可以使用这个Ajax；

Ajax的封装：

/**
     *  $.ajax函数封装获取数据请求
     * */
    function getData(type,url,data,callback) {
        $.ajax({
            type: type,
            url: prefix + url,
            data: data,
            success: function (res) {  //成功否， back， 服务器端响应度信息
                if (res.code == 0) {
                    callback(res);
                }
            },
            error: function () {  //如果错误则错误信息。
                $.modal.alertWarning("请求数据失败");
            }
        })
    };

发送分页请求

前端html代码 ,给类选择器dropload-refresh 设置display:none;隐藏，后面通过jQuery去进行控制它什么时候显示和隐藏。当数据没有时候，提示用户：“暂无数据”或“到底了”等之类的词语。

<div class="company-detail-list" id="companyDetailList">
     <div class="dropload-down loading">
         <div class="dropload-refresh more-data">上拉加载更多</div>
         <div class="dropload-refresh no-data">暂无数据</div>
     </div>
 </div>

综合上述内容

下面是一个实现的过程，传递datas1这个对象过去即可！

// 外部定义一个对象，传递到后台
let datas1 = {
        pageNum: 1,
        pageSize: 14,
        total: null
    };
/**
     * 获取页面数据
     * */
    function  getDetailData() {
        if(datas1.total == null ||(((datas1.pageNum-1) * datas1.pageSize )< datas1.total)) {
            this.getData('get', '/selectEseByhpyjDeptIdorName', datas1, function (res) {
                let rows = res.rows;
                datas1.total = res.total;
                for (let i = 0; i < rows.length; i++) {
                    enterpriseId = rows[i].enterpriseId;
                    $('.company-detail-list').append(`<div class="list-content" οnclick="goListPage()"> <div class="flex-left flex-nowrap">${rows[i].enterpriseName}</div><div class="flex-center">${rows[i].zb}%</div> <div class="flex-right">${rows[i].vcount}/${rows[i].numbers}</div><div class="right-img"><img src="/img/goDetail.png" /></div></div>`);
                }
                datas1.pageNum++;
                $(".more-data").show();
            });
        }else {
            $(".more-data").hide();
            $(".no-data").show();
        }
    }
    getDetailData(); // 调用幻术