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:修改了项目的ajax相关代码,点击运行没有效果

    在运行ajax代码的时候发现这个问题,无论是重启浏览器还是IDE依旧不能解决. 原因: 浏览器调试的缓存 措施: 浏览器启用开发者模式,以Chrome.IDEA为例 1.浏览器设置disable ca ...

  2. jquery中 苹果手机对on触发的点击事件无效果

    在被点击的元素上加上样式  cursor:pointer;  苹果手机就可以触发事件了

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

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

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

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

  5. jquery.ajax和Ajax 获取数据

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

  6. jquery ajax提交数据给后端

    大家好,今天铁柱兄给大家带一段jquery ajax提交数据给后端的教学. 初学javaweb的同学前端提交数据基本上都是用form表单提交,这玩意儿反正我是觉得不太好玩.而JavaScript aj ...

  7. jQuery中使用Ajax获取JSON格式数据示例代码

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.JSONM文件中包含了关于“名称”和“值”的信息.有时候我们需要读取JSON格式的数据文件,在jQuery中 ...

  8. Vue.js——基于$.ajax实现数据的跨域增删查改

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

  9. jquery学习之AJAX

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

随机推荐

  1. windows2003 iis php 配置后无法执行php页面

    1.问题:可以访问静态页面,无法访问php脚本页面,显示404 解决:

  2. 1002 Phone Numbers 解题报告

    1002. Phone Numbers Time limit: 2.0 secondMemory limit: 64 MB In the present world you frequently me ...

  3. Unity 性能

    Unity 5.0 AMD 7650k 自带核显 Unity自建立方体2000正方体 50帧 但每个立方体多达60面 多个三角形 每秒100万面绘制 可能每个都要单独计算光照? 导入3ds模型相当于 ...

  4. cocopods 安装与使用

    iOS 最新版 CocoaPods 的安装流程 1.移除现有Ruby默认源 $gem sources --remove https://rubygems.org/ 2.使用新的源 $gem sourc ...

  5. select change下拉框改变事件 设置选定项,禁用select

    select change下拉框改变事件 设置选定项,禁用select 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  6. FlasActionScript3随学随机

    1.跳转页面代码.下载代码(new URLRequest(下载地址)): var request1:URLRequest=new URLRequest("http://www.baidu.c ...

  7. 向苹果App Store提交新应用的图文教程(转)

    当你克服重重困难终于开发出了自己的App,下一步就是向App Store提交应用了,这时应该如何操作呢?我的App真的准备好提交了?我敢肯定这些问题将会浮现在你的脑海.基于这篇教程,我将告诉你一个完整 ...

  8. iOS中如何隐藏启动图片的状态栏

    只隐藏启动图片顶部的状态栏,而不影响程序运行起来控制器的状态栏显示?在info.plist文件中添加一个Statis bar is...... 默认是NO改为YES即可

  9. github 添加 SSH key

    在 github 上添加 SSH key 的步骤: 1.首先需要检查你电脑是否已经有 SSH key 运行 git Bash 客户端,输入如下代码: $ cd ~/.ssh $ ls 这两个命令就是检 ...

  10. 0.[WP Developer体验Andriod开发]之从零安装配置Android Studio并编写第一个Android App

    0. 所需的安装文件 笔者做了几年WP,近来对Android有点兴趣,尝试一下Android开发,废话不多说,直接进入主题,先安装开发环境,笔者的系统环境为windows8.1&x64. 安装 ...