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对接列表接口。