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

jQuery 移动端ajax请求列表数据,实现点击翻页效果(还有手势往下滑动翻页)。的更多相关文章

  1. 关于ajax请求数据后,数据本身的js失效的一些想法

    今天遇到一个头疼的问题.我做一个左右翻页效果(客户要求能够无限翻页),所以只能动态请求数据,进行局部刷新操作. 这时候问题就出来了,当我请求翻页的时候,数据通过js填充到div里面,但这些数据,自身带 ...

  2. jquery通过ajax获取数据,控制显示的数据条数

    效果图: 现在我们可以先看它的json数据,如图所示:                然后可以对应我们的代码进行理解. jquery通过ajax获取数据,并通过窗口大小控制显示的数据条数,以及可以根据 ...

  3. jquery.ajax和Ajax 获取数据

    前几天接触了jquery 看到里面ajax的部分,自己也不是很懂,然后有重复看了即便,然后写了一个小功能,分享下...我刚学的.有错误的请指教. 验证用户名是否存在 在checkname_jqajax ...

  4. Vue.js&mdash;&mdash;基于$.ajax实现数据的跨域增删查改

    概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是local的.在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax ...

  5. jquery学习之AJAX

    1,关于AJAX的简单介绍 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准 ...

  6. Jquery中的Ajax

    AJAX: * jQuery中的Ajax * 封装第一层 - 类似于原生Ajax的用法 * $.ajax() - 最复杂 * 选项 * url - 请求地址 * type - 请求类型,默认为GET ...

  7. flask+sqlite3+echarts3+ajax 异步数据加载

    结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...

  8. jQuery入门(4)jQuery中的Ajax应用

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  9. 从jquery里的$.ajax()到angularjs的$http

    jquery中对ajax的使用做了很多封装,使得我们使用习惯了,反而并不大清楚在请求过程中的一些细节. 在第一次使用angularjs的$http时,后台一直接受不到前端请求的数据,于是小小研究了一下 ...

随机推荐

  1. js控制Bootstrap 模态框(Modal)插件

    js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html

  2. linux作业

    第二单元 (1)以root用户登录GNOME图形界面 语言支持选择为汉语 (2)使用快捷键切换到虚拟终端2,使用普通用户身份登录,查看系统提示符 (3)使用命令退出虚拟终端2上登录的用户 (4)使用快 ...

  3. 十二种获取Spring的上下文环境ApplicationContext的方法

    转载:https://my.oschina.net/u/2391658/blog/729414

  4. pundit

    gem "pundit" Include Pundit in your application controller: class ApplicationController &l ...

  5. linux 中的 tar 解压

    Type at the command prompt tar xvzf file-1.0.tar.gz - tgfo uncompress a gzip tar file (.tgz or .tar. ...

  6. 部署细节回忆录(包括了nginx重启)

    (文章是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com) $cap -T $cap deploy:setup $cap deploy           (遇 ...

  7. 2.django笔记之缓存,session,cookie,ajax

    一.django缓存 1.缓存 缓存的意义在于把昂贵的计算结果保存起来一遍下次的访问,有缓存的站点的流程大概是这样子的: 给定一个url,检查页面是否在缓存中 如果在,返回缓存的页面 否则,生成该页面 ...

  8. java中的类修饰符、成员变量修饰符、方法修饰符。

    类修饰符: public(访问控制符),将一个类声明为公共类,他可以被任何对象访问,一个程序的主类必须是公共类. abstract,将一个类声明为抽象类,没有实现的方法,需要子类提供方法实现. fin ...

  9. mybatis的增删改查

    一.配置文件方式 mapper.xml: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE ...

  10. C#和.NET版本

    1999年,就听说微软公司在研发一种名为“cool”的新开发语言,而具体内幕一直是个谜,直到2000年6月26日微软在奥兰多举行的“职业开发人员技术大会”(PDC 2000)上,这个谜底终于揭晓了,这 ...