1 首先是html部分
<div class="content">
<div class="list"></div> //list 是放ajax请求的列表
<input type="hidden" id="pageNum"> //pageNum 为记录当前请求接口数据的页码
<div class="more">点击加载更多记录</div> //more 控制点击换页
</div>
2 jQuery实现部分
假设接口返回数据结构如下(我是本地模拟了一个json文件code.json)
json文件的数据模式
{
"data":{
"data":[
{
"id":0,
"name":"zhaomei"
},{
"id":1,
"name":"zhaomei1"
},{
"id":2,
"name":"zhaomei2"
},{
"id":3,
"name":"zhaomei3"
},{
"id":4,
"name":"zhaomei4"
},{
"id":5,
"name":"zhaomei5"
},{
"id":6,
"name":"zhaomei6"
},{
"id":7,
"name":"zhaomei7"
},{
"id":8,
"name":"zhaomei8"
},{
"id":9,
"name":"zhaomei9"
}
],
"page":{
"currentPage":1,
"totalPage":5
}
} ,
"code":0
}
代码实现如下
(本来是从实际的两个项目中采摘过来的,但是觉得还是要本地测试下才妥当,所以在本地服务器中实际测试了下,果然还是有很多坑)
$(function(){ //页面加载完成后执行
var load=false; // load为判断接口是否请求完成,防止多次触摸、多次点击导致接口的多次请求出错
getData(1,"code.json"); //初始化数据从第一页数据开始请求
function getData(page,url){ //请求接口的方法,方法带page,url两个参数。
$('.more').text('正在加载中...');
$.ajax({
url:url, //请求接口的url
type : 'post',//请求方式(post或get)默认为get
async: true, //默认情况下是true表示所有请求为异步请求,如果要为同步则用false
cache:false,//默认为false,设置为false将不会从浏览器缓存中加载请求信息。
/*
dataType选项的值有以下6个,但是一般接口都是返回json格式就用json;
1、"xml":返回 XML 文档,可用 jQuery 处理。
2、"html"::返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。
3、"script"::返回纯文本JavaScript 代码。不会自动缓存结果,除非设置了 "cache" 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的 script标签来加载)
4、"json": 返回 JSON 数据 。
5、"jsonp": JSONP 格式。使用JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数,经常被用来同主域名下不同二级域名下的跨域请求。
6、"text": 返回纯文本字符串。*/
dataType : "json",
data:{
/*page : page, //data里面放实际接口请求的参数,要求为Object或String类型的参数,这里是本地测试就不带参数了*/
},
success : function(data){ //请求成功调用的回调函数
var list=data.data;
if(data.code == 0){
if (list.data.length>0) {
$("#pagenum").val(parseInt(list.page.currentPage)+1);
console.log(222433)
showList(list);
if (list.page.currentPage>=list.page.totalPage) { //这里判断接口数据是否到底部
load=true;
$(".more").html('已经到底了');
}else if(list.page.currentPage<list.page.totalPage) {
load=false;
$(".more").html('查看更多');
}
}
}
},
error : function(error){ //请求失败调用的回调函数
console.log(error);
}
});
}
//函数采用函数声明方式可以在任意位置调用,而不采用函数字变量的写法(如var showList=function(){}),由于函数自变量的写法虽然函数会提升,但是没实际的作用只能在函数后面调用,不利于函数的全局调用
function showList(data){ //显示列表的html内容
var ullist = '';
$.each(data.data,function(i,n){
ullist+='<ul>'+
'<li>111'+n.id+'</li>'+
'<li>'+n.name+'</li>'+
'</ul>';
})
$('.list').append(ullist);
}
//继续加载按钮事件 ,点击按钮后请求换页的数据
$(document).on("click",'.more',function(){
if(load==false) {
load=true;
page=$("#pagenum").val();
getData(page,url);
}
})
//==============核心代码=============
//鼠标向下滚动加载下一页数据,或者移动端向下滑动加载下一页数据
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(load==false) {
load=true;
page=$("#pagenum").val();
getData(page,url);
}
}
}
//定义鼠标滚动事件
$(window).scroll(scrollHandler);
})
有什么问题欢迎留言交流~
大概就这样啦,用jQuery对接列表接口。