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. Maven之安装与简单入门一

    Maven 是一个项目管理和构建自动化工具,我们最关心的是它的项目构建功能.Maven 使用惯例优于配置的原则. 1,下载安装包,并根据文档说明安装: http://maven.apache.org/ ...

  2. EF4.1使用

    EF分为三类: db first:首先建立数据库,然后通过ADO.Net Entity Data Model项目建立.edmx文件,这是一个xml文件主要作用就是映射类和数据表 model first ...

  3. (转)C# foreach 中获取索引index的方法

    在C# 开发中往往使用foreach 循环语句 来代替for循环语句.foreach 比 for 更加简洁高效.           foreach :                 foreach ...

  4. [转]在NopCommerce中新增一个Domain Model的步骤

    本文转自:http://www.cnblogs.com/aneasystone/archive/2012/08/27/2659183.html 在NopCommerce中新增一个Domain Mode ...

  5. Android中插件开发篇之----动态加载Activity(免安装运行程序)

    一.前言 又到周末了,时间过的很快,今天我们来看一下Android中插件开发篇的最后一篇文章的内容:动态加载Activity(免安装运行程序),在上一篇文章中说道了,如何动态加载资源(应用换肤原理解析 ...

  6. ionic介绍

    ionic介绍 Ionic是一个前端的框架,帮助开发者使用HTML5, CSS3和JavaScript做出原生应用. The beautiful, open source front-end fram ...

  7. BZOJ-1036 树的统计Count 链剖线段树(模板)=(树链剖分+线段树)

    潇爷昨天刚刚讲完...感觉得还可以...对着模板打了个模板...还是不喜欢用指针.... 1036: [ZJOI2008]树的统计Count Time Limit: 10 Sec Memory Lim ...

  8. 四层负载均衡——LVS

    LVS   参考:http://zh.linuxvirtualserver.org/   几个术语: Director:也可以称为调度器,LVS前端设备: realserver:也称为真实内部服务器, ...

  9. js遍历

    最近看了一些不错的文章关于js遍历+js数组去重+文件上传的,今天也自己动手试了试.有好多之前不是细节不是很了解.正好学习了. map函数也是 类似这样的对象还有函数的属性arguments对象,当然 ...

  10. [转载]WEB缓存技术概述

    [原文地址]http://www.hbjjrb.com/Jishu/ASP/201110/319372.html 引言 WWW是互联网上最受欢迎的应用之一,其快速增长造成网络拥塞和服务器超载,导致客户 ...