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   主要的就是这么多






















  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值