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对接列表接口。
jQuery 移动端ajax请求列表数据,实现点击翻页效果(还有手势往下滑动翻页)。的更多相关文章
- Ajax:修改了项目的ajax相关代码,点击运行没有效果
在运行ajax代码的时候发现这个问题,无论是重启浏览器还是IDE依旧不能解决. 原因: 浏览器调试的缓存 措施: 浏览器启用开发者模式,以Chrome.IDEA为例 1.浏览器设置disable ca ...
- jquery中 苹果手机对on触发的点击事件无效果
在被点击的元素上加上样式 cursor:pointer; 苹果手机就可以触发事件了
- 关于ajax请求数据后,数据本身的js失效的一些想法
今天遇到一个头疼的问题.我做一个左右翻页效果(客户要求能够无限翻页),所以只能动态请求数据,进行局部刷新操作. 这时候问题就出来了,当我请求翻页的时候,数据通过js填充到div里面,但这些数据,自身带 ...
- jquery通过ajax获取数据,控制显示的数据条数
效果图: 现在我们可以先看它的json数据,如图所示: 然后可以对应我们的代码进行理解. jquery通过ajax获取数据,并通过窗口大小控制显示的数据条数,以及可以根据 ...
- jquery.ajax和Ajax 获取数据
前几天接触了jquery 看到里面ajax的部分,自己也不是很懂,然后有重复看了即便,然后写了一个小功能,分享下...我刚学的.有错误的请指教. 验证用户名是否存在 在checkname_jqajax ...
- jquery ajax提交数据给后端
大家好,今天铁柱兄给大家带一段jquery ajax提交数据给后端的教学. 初学javaweb的同学前端提交数据基本上都是用form表单提交,这玩意儿反正我是觉得不太好玩.而JavaScript aj ...
- jQuery中使用Ajax获取JSON格式数据示例代码
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.JSONM文件中包含了关于“名称”和“值”的信息.有时候我们需要读取JSON格式的数据文件,在jQuery中 ...
- Vue.js——基于$.ajax实现数据的跨域增删查改
概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是local的.在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax ...
- jquery学习之AJAX
1,关于AJAX的简单介绍 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准 ...
随机推荐
- windows2003 iis php 配置后无法执行php页面
1.问题:可以访问静态页面,无法访问php脚本页面,显示404 解决:
- 1002 Phone Numbers 解题报告
1002. Phone Numbers Time limit: 2.0 secondMemory limit: 64 MB In the present world you frequently me ...
- Unity 性能
Unity 5.0 AMD 7650k 自带核显 Unity自建立方体2000正方体 50帧 但每个立方体多达60面 多个三角形 每秒100万面绘制 可能每个都要单独计算光照? 导入3ds模型相当于 ...
- cocopods 安装与使用
iOS 最新版 CocoaPods 的安装流程 1.移除现有Ruby默认源 $gem sources --remove https://rubygems.org/ 2.使用新的源 $gem sourc ...
- select change下拉框改变事件 设置选定项,禁用select
select change下拉框改变事件 设置选定项,禁用select 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...
- FlasActionScript3随学随机
1.跳转页面代码.下载代码(new URLRequest(下载地址)): var request1:URLRequest=new URLRequest("http://www.baidu.c ...
- 向苹果App Store提交新应用的图文教程(转)
当你克服重重困难终于开发出了自己的App,下一步就是向App Store提交应用了,这时应该如何操作呢?我的App真的准备好提交了?我敢肯定这些问题将会浮现在你的脑海.基于这篇教程,我将告诉你一个完整 ...
- iOS中如何隐藏启动图片的状态栏
只隐藏启动图片顶部的状态栏,而不影响程序运行起来控制器的状态栏显示?在info.plist文件中添加一个Statis bar is...... 默认是NO改为YES即可
- github 添加 SSH key
在 github 上添加 SSH key 的步骤: 1.首先需要检查你电脑是否已经有 SSH key 运行 git Bash 客户端,输入如下代码: $ cd ~/.ssh $ ls 这两个命令就是检 ...
- 0.[WP Developer体验Andriod开发]之从零安装配置Android Studio并编写第一个Android App
0. 所需的安装文件 笔者做了几年WP,近来对Android有点兴趣,尝试一下Android开发,废话不多说,直接进入主题,先安装开发环境,笔者的系统环境为windows8.1&x64. 安装 ...