ajax无刷新加载数据

最近做了一个手机端的需求，里面有一个需要使用到ajax无刷新加载数据这样的功能

老样子先展示所需要实现的功能，

里面的数据是我的测试数据，随意了一点，但是能解决问题就行了，不要在意

正题来了：

首页就是当第一次访问的数据的时候，页面会加载出一部分数据，当你点击查看更多的时候会加载出另外一部分数据

如下图所示：

这时2数据有七条，仔细看一下第一张图的数据只有5条

当再次点击的时候按钮就会变成没有更多的信息了，因为我总共添加了七条数据

、

具体的实现手法很简单就是利用ajax的刷新加载数据

上代码:

1.以为页面比较简答，我就只贴一部分比比较重要的了

  按钮的代码：<a href="javascript:void(0);" title="查看更多" id="imore" class="imore">查看更多</a>

请记好这个id值   下面还会用到，到时候别说不知道

3.开始js代码

  注意：在这里我使用的jquery的ajax，别忘了在文件中引入jqery文件

  代码如下：

<script>

  // 首先定义一下page  为  1  因为当也面第一次加载的时候默认加载的数据就是第一页的数据

    var page = 1;

    function getlist(page) {

       $.ajax({

          type : 'GET',

         //  cateid  这个参数根据自己项目的需求传参

          ur : '__CONTROLLER__/getlist/' +page+ '/cateid/'+<?php echo I(get.cateid) ?>',

         dataType  'json',

       success : function(data){

        //  data  为请求返回的数据  对data 进行遍历

       var hrtml = "";

       $(data).each(function(k,v) {

      //  测试使用

         html += '111<br/>';    

});

}

 });

}

// 刚开始加载的时候调用该函数

getlist(1);

$('#imore').click(funciton() {

    getlist(++page);

})

</script>

4.后台处理方法：getlist

   public function getlist($p,$cateid) {

       //  这里的记载更多其实就是先将数据进行分页处理

     // 1.每一页需要显示多少条数据

    $perpage = 5;

    //   2.每一页的数据从哪一条开始显示

   $offset = ($p-1)*$perpage;

   $sql = "select * from cs_article where cateid=$cateid limit $offset,$perpage";

 $art = M();

 $res = $art->query($sql);

  $this->ajaxReturn();

}

ok   主要的就是这么多