Ajax处理json的页面延时效果
0
悬赏园豆：60
[待解决问题]
现有这样的一组数据：
{"rc:"0","rg":"OK","limit":"10","pageindex":"0","total":"56","orders":[{"account":"81614030","uin":"1491631","chargeTime":"2012-11-26\x2021\x3A29\x3A58"},{"account":"81614031","uin":"1491631","chargeTime":"2012-11-26\x2021\x3A29\x3A58"},{"account":"81614032","uin":"1491631","chargeTime":"2012-11-26\x2021\x3A29\x3A58"},{"account":"81614033","uin":"1491631","chargeTime":"2012-11-26\x2021\x3A29\x3A58"},{"account":"81614034","uin":"1491631","chargeTime":"2012-11-26\x2021\x3A29\x3A58"},{"account":"81614035","uin":"1491631","chargeTime":"2012-11-26\x2021\x3A29\x3A58"},{"account":"81614036","uin":"1491631","chargeTime":"2012-11-26\x2021\x3A29\x3A58"},{"account":"81614037","uin":"1491631","chargeTime":"2012-11-26\x2021\x3A29\x3A58"},{"account":"81614038","uin":"1491631","chargeTime":"2012-11-26\x2021\x3A29\x3A58"},{"account":"81614039","uin":"1491631","chargeTime":"2012-11-26\x2021\x3A29\x3A58"},{"account":"81614040","uin":"1491631","chargeTime":"2012-11-26\x2021\x3A29\x3A58"},{"account":"81614041","uin":"1491631","chargeTime":"2012-11-26\x2021\x3A29\x3A58"},,{"account":"81614042","uin":"1491631","chargeTime":"2012-11-26\x2021\x3A29\x3A58"},,{"account":"81614043","uin":"1491631","chargeTime":"2012-11-26\x2021\x3A29\x3A58"},,{"account":"81614044","uin":"1491631","chargeTime":"2012-11-26\x2021\x3A29\x3A58"},,{"account":"81614044","uin":"1491631","chargeTime":"2012-11-26\x2021\x3A29\x3A58"},,{"account":"81614045","uin":"1491631","chargeTime":"2012-11-26\x2021\x3A29\x3A58"},,{"account":"81614046","uin":"1491631","chargeTime":"2012-11-26\x2021\x3A29\x3A58"}]}
参数说明：limit每页显示条数，pageindex当前页，total总数；
想要的效果是：
如上图，显示的是order的数据的列表页，每页显示10条，当页面滚动到页底时，显示“加载中，请稍后”，请求数据，数据加载后显示出来。有懂的大牛请给我用实例说明下，最好是原生js，感谢万分！
所有回答(2)
0
<script type="text/javascript" charset="UTF-8">
$(function(){
//处理中
$("#ajax_loading").ajaxStart(function(){
var height=$(document).height();
$("body").append("<div id='mask'></div>");
$("#mask").height(height);
$("#mask").show();
$(this).show();
var top=document.documentElement.scrollTop+(document.documentElement.clientHeight-$(this).height())/2;
$(this).css("top",top);
$(this).show();
}).ajaxStop(function(){
$(this).hide();
$("#mask").remove();
});
})
</script>
0
给你一个原型，在这个基础上再修改吧
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/jQuery.tmpl.js"></script>
<script type="text/javascript">
$(function () {
//每次加载10个记录，拉到最底部的时候，又加载10个记录
LoadTenItem();
$(window).scroll(function () {
var documentTop = $(document).scrollTop();
var windowHeight = $(window).height();
var documentHeight = $(document).height();
if (documentTop >= (documentHeight - windowHeight)
&& $("#loading").length == 0
) {
$("#loadingTemplate").tmpl().appendTo("#content");
LoadTenItem();
$("#loading").remove();
}
});
});
function LoadTenItem() {
//这里替换为真正的ajax访问
for (i = 0; i < 10; i++) {
$("#itemTemplate").tmpl({ name: "ares", id: i }).appendTo("#content");
}
}
</script>
</head>
<body>
<!--这里是内容占位符-->
<div id="content">
</div>
<!--这里是一个数据模版-->
<script id="itemTemplate" type="text/x-jquery-tmpl">
<div style="height: 400px; border: solid 1px gray">
<h1>${id}</h1>
<span>${name}</span>
</div>
</script>
<!--这里是一个数据模版-->
<script id="loadingTemplate" type="text/x-jquery-tmpl">
<div id="loading">
<img src="loading.gif" />
</div>
</script>
</body>
</html>
