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

过完年了，又要有新的项目了，趁暴风雨前的宁静，就把之前让我挺头疼的ajax加载给总结了一下。在此分享。

声明下：笔者对于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='radio' class='radio_input' name='"+array['radio_name']+"' />"+array["a"]+"</p></td></tr>"; 
                                 str += "<tr><td><p><input type='radio' class='radio_input' name='"+array['radio_name']+"' />"+array["b"]+"</td></tr>"; 
                                 str += "<tr><td><p><input type='radio' class='radio_input' name='"+array['radio_name']+"' />"+array["c"]+"</td></tr>"; 
                                 str += "<tr><td><p><input type='radio' class='radio_input' name='"+array['radio_name']+"' />"+array["d"]+"</td></tr>"; 
                                 $(str).appendTo("#table_more");   //将生成的文本追加到ID table_more子级最后面
                                              });
                                              }
                                        });

                                return currentpage;                //返回执行后的页码数

  }
});

下来是php

<?php 
$arr = array(
            array(
                'tiMu'=>'6、题目',
                'radio_name'=>'name_6',
                'a'=>'A. 化学药品',
                'b'=>'B .生物制品',
                'c'=>'C .中药饮片',
                'd'=>'D .中草药'
                ),
            array(
                'tiMu'=>'7、题目',
                'radio_name'=>'name_7',
                'a'=>'A. 化学药品',
                'b'=>'B .生物制品',
                'c'=>'C .中药饮片',
                'd'=>'D .中草药'
                ),
            array(
                'tiMu'=>'8、题目',
                'radio_name'=>'name_8',
                'a'=>'A. 化学药品',
                'b'=>'B .生物制品',
                'c'=>'C .中药饮片',
                'd'=>'D .中草药'
                ),
            array(
                'tiMu'=>'9、题目',
                'radio_name'=>'name_9',
                'a'=>'A. 化学药品',
                'b'=>'B .生物制品',
                'c'=>'C .中药饮片',
                'd'=>'D .中草药'
                ),
            array(
                'tiMu'=>'10、题目',
                'radio_name'=>'name_10',
                'a'=>'A. 化学药品',
                'b'=>'B .生物制品',
                'c'=>'C .中药饮片',
                'd'=>'D .中草药'
                ),
);
$json = json_encode($arr);
echo $json;
?>

 

 

2014年2月17日

Margo