HTML5页面在安卓手机端分页显示数据

最近项目中要跟安卓那边搞接口对接。安卓那边请求我的接口，现在的页面都是我自己用html5写的jsp页面。

首先引入已经封装好的js文件（ajaxRequest.js）。

 function autoLoadMessage(){

                var messagePn = document.getElementById("messagePN").value!=""?document.getElementById("messagePN").value:"${page_info.page}";

   var messagePageCount = "${page_info.total}";

var ajax = new AJAXRequest();

var nextPn = (Number(messagePn)+Number(1));

ajax.async = true;//异步AJAX 同步IE6下会出现多次请求 其它IE没有测试

if(nextPn<=${page_info.allPage}){

ajax.get("${pageContext.request.contextPath}/salesmanInter/doLoadList.do?page="+nextPn+"&STORE_NAME=" + "${STORE_NAME}",

      function(obj) {

if(obj.responseText){

var contianer = document.createElement("div");

contianer.innerHTML = obj.responseText;

document.getElementById("messageContent").appendChild(contianer);

document.getElementById("messagePN").value = nextPn; // 设置下一页

}

});

}

}

 

window.onscroll = function(){

var a = document.documentElement.clientHeight==0? document.body.clientHeight : document.documentElement.clientHeight;

var b = document.documentElement.scrollTop==0? document.body.scrollTop : document.documentElement.scrollTop;

var c = document.documentElement.scrollTop==0? document.body.scrollHeight : document.documentElement.scrollHeight;

if(a+b>=c){

autoLoadMessage();

}

}

 

这段代码就是当手机的页面向上滑动的时候自动加载下一页信息。messagePN这个字段要在jsp页面里写个隐藏域。${page_info.page}是当前页数，${page_info.total} 是总页数，都是我自己从后台传过来的。 当手机页面向上滑动的时候会触发这个js事件。这个事件调用到ajax.get 后面的URL。

注意事项：在页面开始的时候，你可能请求的是一个后台，后台跳转到整个jsp页面，但是，在这个ajax回调的时候最好单独再写一个后台，返回的页面是局部要刷新的页面，这个新页面只要写入你要填入的值就行

 

上面这段代码就是我要加载进来的，不需要重新加载之前的整个页面，这也是我建议最好重新单独写一个后台跳转到这个页面的原因。

评论

1 楼 zskangs1126 2015-06-27