移動端-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