ajax下拉 加载 下一页,jQuery滑动到底部加载下一页数据的实例代码

page_num =page_num+1 ; //页码自动增加，保证下次调用时为新的一页。

$.ajax({

type: "get",

url: rent_url,

data: '2',

dataType: "json",

success: function (data) {

// 查询到的数据总数

rentDataNum = data.count

// 每页加载6个 需要加载的页数

rentDataPagge = Math.ceil(rentDataNum/6);

$(".loaddiv").hide();

// 返回信息的长度 大于0 则调用函数 把加载的数据通过html的形式 追加到视图中

if (data.houses.length > 0) {

insertDiv(data.houses,rentDataPagge,pagenumber);

}

},

beforeSend: function () {

$(".loaddiv").show();

},

error: function (data) {

$(".loaddiv").hide();

}

});

}

//初始化加载第一页数据

getData(1);

//生成数据html,append到div中

function insertDiv(data,page_num,pagenumber) {

var $mainDiv = $(".er_list");

var result = '';

if (pagenumber<=page_num){

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

var houe_title = data[i].community_name != undefined ? data[i].community_name:data[i].business_area_name;

result +='

';

result +=''

result +='

'

result +='

'

result +='

'+houe_title+'

'

result +='

'+data[i].bedroom+' 室'+ data[i].livingroom+' 厅1卫·'+data[i].buildarea+' ㎡·东南

'

result +='

'+data[i].district_name+'

'

result +='

'

result +='不限购近地铁满两年满两年'

result +='

'

result +='

'+data[i].price+'

123 /㎡

'

result +='

'

result +=''

result +='

';

}

$mainDiv.append(result);

// 如果加载完数据则 删除等待加载时的图片

if (pagenumber==page_num){

$("div").remove('#loadings')

}

}

}

//==============核心代码=============

var winH = $(window).height(); //页面可视区域高度

var scrollHandler = function () {

var pageH = $(document.body).height();

var scrollT = $(window).scrollTop(); //滚动条top

var aa = (pageH - winH - scrollT) / winH;

if (aa < 0.02) {//0.02是个参数

// 避免加载万书记 不停调用函数 进行的加载

if (page_num<=rentDataPagge+1){

// 滑动到地部 调用函数 加载数据

getData(page_num);

}

}

}

//定义鼠标滚动事件

$(window).scroll(scrollHandler);

//==============核心代码=============

//继续加载按钮事件

$("#btn_Page").click(function () {

getData(page_num);

$(window).scroll(scrollHandler);

});

});