$.get()请求-加载更多

一，$.get(url,[data],[callback], [type])

http://www.jb51.net/article/20358.htm

说明：url为请求地址，data为请求数据的列表(是可选的，也可以将要传的参数写在url里面)，callback为请求成功后的回调函数，该函数接受两个参数，第一个为服务器返回的数据，第二个参数为服务器的状态，是可选参数。而其中，服务器返回数据的格式其实是字符串形势，并不是我们想要的json数据格式，在此引用只是为了对比说明。

1 $.get("data.php",$("#firstName.val()"),function(data){
2 
3 　　$("#getResponse").html(data); }//返回的data是字符串类型
4 
5 );

 

例子为：

http://192.168.2.111/5uv3_develop/forum.php?mod=activity&mobile=2

这个网址是手机版活动聚合页的加载更多方式；利用&page=1后面的内容ajax异步加载，一个很好的加载页面

HTML代码为：

<section class="ch_activity">
    <ul id="ch_actbox">
          <li></li>
          <li></li>
          ...
          <li></li>  
    </ul>
</section>
<div class="act_page"><a href="javascript:void(0);" page="2" totalpage="$maxpage" class="act_more" id="actbox_More">加载更多</a></div>

JS代码为：

$('#actbox_More').on("click",function(){
    var url,num;
    var page=parseInt($(this).attr('page'));
    var totalpage=parseInt($(this).attr('totalpage'));
    url='forum.php?mod=activity'+'&page='+page+'&mobile=2';
    if(page <= totalpage){
    $.get(url,function(data){   
          $("#ch_actbox").append($(data).find("#ch_actbox li"));
          num=page+1;
          $("#actbox_More").attr("page",num);
          if(num==totalpage+1)
          {
            $("#actbox_More").html('没有更多了');
          }
      });
    }else{
       $("#actbox_More").html('没有更多了');
    }
  });

 

格外可以这样写：

$('#notice_More').on("click",function(){
     var num;
     var url='home.php'+window.location.search;
     var page=parseInt($(this).attr('page'));
     var totalpage=parseInt($(this).attr('totalpage'));
     if(page <= totalpage){
        $.get(url,{page:page},function(data){
            $("#notice_box").append($(data).find("#notice_box li"));
            num=page+1;
            $("#notice_More").attr("page",num);
            if(num==totalpage+1){
              $("#notice_More").html("没有更多了");
            }
        });
      }else{
        $("#notice_More").html("没有更多了");
      }
  });

 

如图：

封装好一个函数可以利用到很多个页面中，利用原理是：

http://192.168.2.111/5uv3_develop/forum.php?mod=activity&page=2&mobile=2

http://192.168.2.111/5uv3_develop/forum.php?mod=activity&page=3&mobile=2

http://192.168.2.111/5uv3_develop/forum.php?mod=activity&page=4&mobile=2

http://192.168.2.111/5uv3_develop/forum.php?mod=activity&page=5&mobile=2

....

每个分页页面截取内容！