jQuery 移动端ajax请求列表数据,实现点击翻页效果(还有手势往下滑动翻页)。
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对接列表接口。