首页 > 程序开发 > web前端 > JavaScript >

移动端-jquery Ajax执行滑动到底部进行加载 指定加载次数

2014-02-18

项目需求:移动端访问,进行选择答题,初始为五道题,当滑动到底部的时候,会有一个提示,向下滑动继续答题。滑动后ajax加载,每次加载五道题。加载出十五道题的时候,停止加载,并隐藏提示,显示出 提交答案的

项目需求:
移动端访问,进行选择答题,初始为五道题,当滑动到底部的时候,会有一个提示,向下滑动继续答题。
滑动后ajax加载,每次加载五道题。加载出十五道题的时候,停止加载,并隐藏提示,显示出 提交答案的按钮。
(给人感觉永远答不完题一样,感觉这种需求纯属扯淡)
但是再扯淡也得实现不是..直接贴代码:我个人感觉写的复杂了,但是可以实现效果,发这个博文的目的还是想得到斧正。
复制代码
<script src="js/jquery.js" type="text/javascript"></script>
<script>
//创建页码,每次获取ajax 页码+1,达到指定页码后停止加载
if (2<2) {
var currentpage=0;
var totalpage=50;
var maxpage=2;
} else{
var currentpage=4-4;
var totalpage=50;
var maxpage=2;
};
$(document).ready(function(){
$(window).scroll(function(){
  var scrollTop = $(this).scrollTop(); //滚动条距离顶部的高度
  var scrollHeight = $(document).height(); //当前页面的总高度
  var windowHeight = $(this).height(); //当前可视的页面高度
 if(scrollTop + windowHeight >= scrollHeight){ //距离顶部+当前高度 >=文档总高度 即代表滑动到底部
ajaxRed(); //开始加载ajax
if(currentpage ==2){ //如果加载ajax达到2次 停止加载
$(".down_move").hide(); //提示滚动 图片隐藏
$(".submit_btn").css("display","block"); //提示可以提交该表单按钮出现。
return false; //如果条件满足 停止运行该判断
}
}
});
function ajaxRed(){
$("#loading_text").ajaxStart(function(){ //ajax开始执行(此方法必须jquery1.6版本及以下可以使用,高版本不支持)
$(this).show();
}).ajaxStop(function(){ //ajax结束执行(此方法必须jquery1.6版本及以下可以使用,高版本不支持)
$(this).hide();
});
currentpage++; //执行成功页码+1
if (currentpage>=totalpage || currentpage>maxpage){
return currentpage; //判断页码是否达到限定的加载次数;
return false;
}
var html="";
$.getJSON("json.php",function(json){ //获取json
if(json){ //每次加载五道题目
$.each(json,function(index,array){
var str = "<tr><td><h2>"+array["tiMu"]+"</h2></td></tr>";
str += "<tr><td><p><input type=&#39;radio&#39; class=&#39;radio_input&#39; name=&#39;"+array[&#39;radio_name&#39;]+"&#39; />"+array["a"]+"</p></td></tr>";
str += "<tr><td><p><input type=&#39;radio&#39; class=&#39;radio_input&#39; name=&#39;"+array[&#39;radio_name&#39;]+"&#39; />"+array["b"]+"</td></tr>";
str += "<tr><td><p><input type=&#39;radio&#39; class=&#39;radio_input&#39; name=&#39;"+array[&#39;radio_name&#39;]+"&#39; />"+array["c"]+"</td></tr>";
str += "<tr><td><p><input type=&#39;radio&#39; class=&#39;radio_input&#39; name=&#39;"+array[&#39;radio_name&#39;]+"&#39; />"+array["d"]+"</td></tr>";
$(str).appendTo("#table_more"); //将生成的文本追加到ID table_more子级最后面
});
}
});
return currentpage; //返回执行后的页码数
}
});
复制代码
下来是php
复制代码
<?php
$arr = array(
array(
&#39;tiMu&#39;=>&#39;6、题目&#39;,
&#39;radio_name&#39;=>&#39;name_6&#39;,
&#39;a&#39;=>&#39;A. 化学药品&#39;,
&#39;b&#39;=>&#39;B .生物制品&#39;,
&#39;c&#39;=>&#39;C .中药饮片&#39;,
&#39;d&#39;=>&#39;D .中草药&#39;
),
array(
&#39;tiMu&#39;=>&#39;7、题目&#39;,
&#39;radio_name&#39;=>&#39;name_7&#39;,
&#39;a&#39;=>&#39;A. 化学药品&#39;,
&#39;b&#39;=>&#39;B .生物制品&#39;,
&#39;c&#39;=>&#39;C .中药饮片&#39;,
&#39;d&#39;=>&#39;D .中草药&#39;
),
array(
&#39;tiMu&#39;=>&#39;8、题目&#39;,
&#39;radio_name&#39;=>&#39;name_8&#39;,
&#39;a&#39;=>&#39;A. 化学药品&#39;,
&#39;b&#39;=>&#39;B .生物制品&#39;,
&#39;c&#39;=>&#39;C .中药饮片&#39;,
&#39;d&#39;=>&#39;D .中草药&#39;
),
array(
&#39;tiMu&#39;=>&#39;9、题目&#39;,
&#39;radio_name&#39;=>&#39;name_9&#39;,
&#39;a&#39;=>&#39;A. 化学药品&#39;,
&#39;b&#39;=>&#39;B .生物制品&#39;,
&#39;c&#39;=>&#39;C .中药饮片&#39;,
&#39;d&#39;=>&#39;D .中草药&#39;
),
array(
&#39;tiMu&#39;=>&#39;10、题目&#39;,
&#39;radio_name&#39;=>&#39;name_10&#39;,
&#39;a&#39;=>&#39;A. 化学药品&#39;,
&#39;b&#39;=>&#39;B .生物制品&#39;,
&#39;c&#39;=>&#39;C .中药饮片&#39;,
&#39;d&#39;=>&#39;D .中草药&#39;
),
);
$json = json_encode($arr);
echo $json;
?>
复制代码
相关文章
最新文章
热点推荐